@atlaskit/navigation-system 2.16.0 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlassian/navigation-system
 
+## 2.18.0
+
+### Minor Changes
+
+- [`35dbcb50e7873`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/35dbcb50e7873) -
+  Changes TopNavMiddle items (search + create) to now be centred on large desktop screens, when the
+  `navx-full-height-sidear` feature gate is enabled.
+
+## 2.17.0
+
+### Minor Changes
+
+- [`dc96cee1f923a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc96cee1f923a) -
+  Minor improvements to the side nav peek (flyout) animations. These changes are behind the
+  `navx-full-height-sidebar` feature flag.
+
+  - The timing functions for the peek and hide animations have been slightly tweaked to align with
+    the new full height sidebar animations
+  - The peek animation duration has been increased to 300ms from 200ms to align with the new full
+    height sidebar animations
+  - During the collapse animation, the flyout will now maintain its background color and box-shadow.
+    They were previously unset as soon as the animation started.
+
+- [`dc96cee1f923a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc96cee1f923a) -
+  [ux] The sidebar will now animate when expanding and collapsing on supported browsers. Currently
+  Firefox is not supported. This change is behind the feature gate `navx-full-height-sidebar`.
+
+  The sidebar previously only animated when peeking (flyout mode). This change makes it animate on
+  regualar toggles as well. The `Main` layout area will still instantly "snap" into its new position
+  without any animations.
+
 ## 2.16.0
 
 ### Minor Changes

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

@@ -16,4 +16,4 @@
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@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}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}

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

@@ -54,10 +54,18 @@ var styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
+  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
+  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
+  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
+  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
+  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
+  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -572,6 +580,18 @@ function SideNavInternal(_ref) {
     panelId: _constants.sideNavPanelSplitterId
   });
   var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+
+  // Used to prevent sidebar expand animations from running on the initial render.
+  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+  var isFirstRenderRef = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("nav", (0, _extends2.default)({
     id: id
   }, devTimeOnlyAttributes, {
@@ -580,7 +600,7 @@ function SideNavInternal(_ref) {
     style: (0, _defineProperty2.default)({}, _constants.sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(_hoistUtils.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

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

@@ -5,4 +5,5 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -15,13 +15,32 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _topNavStartContext = require("../../../context/top-nav-start/top-nav-start-context");
 var _toggleButtonProvider = require("../side-nav/toggle-button-provider");
-var _useSideNavVisibility2 = require("../side-nav/use-side-nav-visibility");
+var _useSideNavVisibility3 = require("../side-nav/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); }
-var styles = {
+/**
+ * Styles for the TopNavStart element.
+ *
+ * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * which re-enables pointer events.
+ */
+var innerStyles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
+  fullHeightSidebar: "_lcxv1wug",
+  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 `navx-full-height-sidebar` is enabled.
+ */
+var wrapperStyles = {
+  root: "_vchhusvi",
+  fullHeightSidebar: "_bozgutpp",
+  fullHeightSidebarCollapsed: "_15rip2n4",
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
 /**
@@ -31,16 +50,43 @@ var styles = {
  * This ensures we get focus restoration for free.
  */
 var sideNavToggleButtonKey = 'side-nav-toggle-button';
+var TopNavStartInnerOld = /*#__PURE__*/(0, _react.forwardRef)(function TopNavStartInner(_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([innerStyles.root, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children);
+});
+var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.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 = (0, _useSideNavVisibility3.useSideNavVisibility)({
+      defaultCollapsed: true
+    }),
+    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: (0, _runtime.ax)([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([innerStyles.root, innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children));
+});
 
 /**
  * __TopNavStart__
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-function TopNavStart(_ref) {
-  var children = _ref.children,
-    testId = _ref.testId,
-    sideNavToggleButton = _ref.sideNavToggleButton;
+function TopNavStart(_ref3) {
+  var children = _ref3.children,
+    testId = _ref3.testId,
+    sideNavToggleButton = _ref3.sideNavToggleButton;
   var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
@@ -52,10 +98,10 @@ function TopNavStart(_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 _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
+  var _useSideNavVisibility2 = (0, _useSideNavVisibility3.useSideNavVisibility)({
       defaultCollapsed: true
     }),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
 
   // For SSR assume desktop
   var _useState = (0, _react.useState)(true),
@@ -75,10 +121,10 @@ function TopNavStart(_ref) {
   (0, _compiled.UNSAFE_useMediaQuery)('above.md', function (event) {
     setIsDesktop(event.matches);
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var TopNavStartInner = (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  return /*#__PURE__*/_react.default.createElement(TopNavStartInner, {
     ref: (0, _platformFeatureFlags.fg)('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    "data-testid": testId,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, (0, _platformFeatureFlags.fg)('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
+    testId: testId
   }, !(0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && /*#__PURE__*/_react.default.createElement(_toggleButtonProvider.SideNavToggleButtonSlotProvider, {

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

@@ -20,4 +20,5 @@
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._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){._1rqt15p1{grid-template-columns:var(--n_sNvlw,1fr) minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -34,7 +34,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt15p1"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**

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

@@ -16,4 +16,4 @@
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@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}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}

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

@@ -41,10 +41,18 @@ const styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
+  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
+  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
+  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
+  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
+  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
+  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 const fallbackDefaultWidth = 320;
@@ -561,6 +569,18 @@ function SideNavInternal({
     panelId: sideNavPanelSplitterId
   });
   const isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+
+  // Used to prevent sidebar expand animations from running on the initial render.
+  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -572,7 +592,7 @@ function SideNavInternal({
     },
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -5,4 +5,5 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -1,17 +1,37 @@
 /* top-nav-start.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 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 { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provider';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-const styles = {
+
+/**
+ * Styles for the TopNavStart element.
+ *
+ * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * which re-enables pointer events.
+ */
+const innerStyles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
+  fullHeightSidebar: "_lcxv1wug",
+  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 `navx-full-height-sidebar` is enabled.
+ */
+const wrapperStyles = {
+  root: "_vchhusvi",
+  fullHeightSidebar: "_bozgutpp",
+  fullHeightSidebarCollapsed: "_15rip2n4",
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
 /**
@@ -21,6 +41,36 @@ const styles = {
  * This ensures we get focus restoration for free.
  */
 const sideNavToggleButtonKey = 'side-nav-toggle-button';
+const TopNavStartInnerOld = /*#__PURE__*/forwardRef(function TopNavStartInner({
+  children,
+  testId
+}, ref) {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([innerStyles.root, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children);
+});
+const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS({
+  children,
+  testId
+}, 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
+  const {
+    isExpandedOnDesktop
+  } = useSideNavVisibility({
+    defaultCollapsed: true
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([innerStyles.root, innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children));
+});
 
 /**
  * __TopNavStart__
@@ -64,10 +114,10 @@ export function TopNavStart({
   UNSAFE_useMediaQuery('above.md', event => {
     setIsDesktop(event.matches);
   });
-  return /*#__PURE__*/React.createElement("div", {
+  const TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    "data-testid": testId,
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
+    testId: testId
   }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {

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

@@ -20,4 +20,5 @@
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._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){._1rqt15p1{grid-template-columns:var(--n_sNvlw,1fr) minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -23,7 +23,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 const styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt15p1"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**

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

@@ -16,4 +16,4 @@
 ._vchhusvi{box-sizing:border-box}
 @media (min-width:48rem){._14b5hc79{width:var(--n_snvRsz,var(--n_sNvw))}}
 @media (min-width:64rem){._165t56xv{height:calc(100vh - var(--n_bnrM, 0px))}._180k1wjm{inset-block-start:calc(var(--n_bnrM, 0px))}._26vxoned{padding-block-start:calc(var(--n_tNvM, 0px))}._1mt19dtb{margin-block-start:calc(var(--n_tNvM, 0px)*-1)}._dm2518uv{display:initial}._dm25glyw{display:none}._qiln1gzg{grid-area:main}._p5clglyw{border-inline-end:none}._4ap31bhr{background-color:var(--ds-surface-overlay,#fff)}._scbp1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}._qilnk0mc{grid-area:side-nav}._p5cl7r9e{border-inline-end:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}._4ap3vuon{background-color:var(--ds-surface,#fff)}._scbpglyw{box-shadow:none}}
-@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}}}
+@supports not (-moz-appearance:none){@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._1ee1188d{transition-duration:.3s}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform:none}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._1ee1fnf5{transition-duration:.2s}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._2dsh8iot{transition-property:transform,display}._15ld1a5r{transition-behavior:allow-discrete}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){._kzn71gzg{grid-area:main}._1t2c1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._14ckjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference) and (min-width:64rem){@starting-style{._121hjq3t{transform:translateX(-100%)}}._kzn7k0mc{grid-area:side-nav}._1t2c1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._14ckglyw{transform: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){._139f8iot{transition-property:transform,display}._sylc1a5r{transition-behavior:allow-discrete}._1tpv188d{transition-duration:.3s}}@media (prefers-reduced-motion:no-preference){._1h8i1gzg{grid-area:main}._ik8q1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._1uwsjq3t{transform:translateX(-100%)}}@media (prefers-reduced-motion:no-preference){@starting-style{._oyeijq3t{transform:translateX(-100%)}}._ik8q1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}}}

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

@@ -45,10 +45,18 @@ var styles = {
   root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs1cd0 _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5cl7r9e _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
+  flyoutBaseStylesFullHeightSidebar: "_qiln1gzg _p5clglyw _4ap31bhr _scbp1cd0 _2dsh8iot _15ld1a5r",
+  flyoutOpenFullHeightSidebar: "_1ee1188d _1t2c1ku9 _14ckglyw _121hjq3t",
+  flyoutAnimateClosedFullHeightSidebar: "_dm25glyw _1ee1fnf5 _1t2c1mm8 _14ckjq3t",
   flexContainer: "_4t3i1osq _1e0c1txw _2lx21bp4 _1bah1yb4",
   hiddenMobileAndDesktop: "_1e0cglyw",
   hiddenMobileOnly: "_1e0cglyw _dm2518uv",
   hiddenDesktopOnly: "_dm25glyw",
+  animationBaseStyles: "_139f8iot _sylc1a5r _1tpv188d",
+  expandAnimationMobile: "_ik8q1ku9 _oyeijq3t",
+  collapseAnimationMobile: "_1h8i1gzg _ik8q1mm8 _1uwsjq3t",
+  expandAnimationDesktop: "_kzn7k0mc _1t2c1ku9 _14ckglyw _121hjq3t",
+  collapseAnimationDesktop: "_kzn71gzg _1t2c1mm8 _14ckjq3t",
   fullHeightSidebar: "_165t56xv _180k1wjm _26vxoned _1mt19dtb"
 };
 var fallbackDefaultWidth = 320;
@@ -563,6 +571,18 @@ function SideNavInternal(_ref) {
     panelId: sideNavPanelSplitterId
   });
   var isFlyoutClosed = (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'closed' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === undefined;
+
+  // Used to prevent sidebar expand animations from running on the initial render.
+  // Otherwise, the `@starting-style` rule will cause the sidebar to slide in initially.
+  var isFirstRenderRef = useRef(true);
+  useEffect(function () {
+    if (!fg('navx-full-height-sidebar')) {
+      return;
+    }
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement("nav", _extends({
     id: id
   }, devTimeOnlyAttributes, {
@@ -571,7 +591,7 @@ function SideNavInternal(_ref) {
     style: _defineProperty({}, sideNavVar, clampedWidth),
     ref: mergedRef,
     "data-testid": testId,
-    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && styles.flyoutAnimateClosed, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
+    className: ax([styles.root, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.animationBaseStyles, isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationMobile, !isExpandedOnMobile && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationMobile, isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.expandAnimationDesktop, !isExpandedOnDesktop && !isFirstRenderRef.current && fg('navx-full-height-sidebar') && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !fg('navx-full-height-sidebar') && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !fg('navx-full-height-sidebar') && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && fg('navx-full-height-sidebar') && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && fg('navx-full-height-sidebar') && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && fg('navx-full-height-sidebar') && styles.flyoutAnimateClosedFullHeightSidebar, isFlyoutClosed && fg('navx-full-height-sidebar') && styles.fullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

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

@@ -5,4 +5,5 @@
 ._4t3i1osq{height:100%}
 ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
 ._lcxv1wug{pointer-events:auto}
-@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._10jxnau3{max-width:calc(100% - var(--ds-space-200, 1pc))}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._15rin7od{min-width:unset}._glte1osq{width:100%}._15rip2n4{min-width:330px}._glte1ris{width:max-content}._15ri1mjv{min-width:300px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}

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

@@ -2,17 +2,37 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./top-nav-start.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 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 { SideNavToggleButtonSlotProvider } from '../side-nav/toggle-button-provider';
 import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
-var styles = {
+
+/**
+ * Styles for the TopNavStart element.
+ *
+ * When `navx-full-height-sidebar` is enabled this is the styling for the inner element,
+ * which re-enables pointer events.
+ */
+var innerStyles = {
   root: "_zulp1b66 _yyhykb7n _4t3i1osq _4cvr1h6o _1e0c1txw _glte1ris _15ri1mjv _1gs5usvi",
   jiraProductLogoUpdate: "_15rip2n4",
-  fullHeightSidebar: "_bozgutpp _lcxv1wug",
-  fullHeightSidebarExpanded: "_15rin7od _glte1osq _10jxnau3"
+  fullHeightSidebar: "_lcxv1wug",
+  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 `navx-full-height-sidebar` is enabled.
+ */
+var wrapperStyles = {
+  root: "_vchhusvi",
+  fullHeightSidebar: "_bozgutpp",
+  fullHeightSidebarCollapsed: "_15rip2n4",
+  fullHeightSidebarExpanded: "_glte93mn _exxmpxbi"
 };
 
 /**
@@ -22,16 +42,43 @@ var styles = {
  * 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, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, 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;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": testId,
+    className: ax([wrapperStyles.root, wrapperStyles.fullHeightSidebar, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([innerStyles.root, innerStyles.fullHeightSidebar, isExpandedOnDesktop && innerStyles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && innerStyles.jiraProductLogoUpdate])
+  }, children));
+});
 
 /**
  * __TopNavStart__
  *
  * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
  */
-export function TopNavStart(_ref) {
-  var children = _ref.children,
-    testId = _ref.testId,
-    sideNavToggleButton = _ref.sideNavToggleButton;
+export function TopNavStart(_ref3) {
+  var children = _ref3.children,
+    testId = _ref3.testId,
+    sideNavToggleButton = _ref3.sideNavToggleButton;
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);
   useEffect(function () {
@@ -43,10 +90,10 @@ export function TopNavStart(_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 _useSideNavVisibility = useSideNavVisibility({
+  var _useSideNavVisibility2 = useSideNavVisibility({
       defaultCollapsed: true
     }),
-    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
+    isExpandedOnDesktop = _useSideNavVisibility2.isExpandedOnDesktop;
 
   // For SSR assume desktop
   var _useState = useState(true),
@@ -66,10 +113,10 @@ export function TopNavStart(_ref) {
   UNSAFE_useMediaQuery('above.md', function (event) {
     setIsDesktop(event.matches);
   });
-  return /*#__PURE__*/React.createElement("div", {
+  var TopNavStartInner = fg('navx-full-height-sidebar') ? TopNavStartInnerFHS : TopNavStartInnerOld;
+  return /*#__PURE__*/React.createElement(TopNavStartInner, {
     ref: fg('platform_fix_component_state_update_for_suspense') ? elementRef : ref,
-    "data-testid": testId,
-    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, fg('team25-eu-jira-logo-updates-csm-jsm') && styles.jiraProductLogoUpdate])
+    testId: testId
   }, !fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {
     key: sideNavToggleButtonKey
   }, sideNavToggleButton), sideNavToggleButton && (!isDesktop || !isExpandedOnDesktop) && fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement(SideNavToggleButtonSlotProvider, {

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

@@ -20,4 +20,5 @@
 ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
 ._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){._1rqt15p1{grid-template-columns:var(--n_sNvlw,1fr) minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:64rem){._1rqt16a9{grid-template-columns:0fr minmax(min-content,max-content) 1fr}._hyzqcs5v{z-index:2}._pdlmutpp{gap:var(--ds-space-150,9pt)}}
+@media (min-width:110.5rem){._jh1g18ax{grid-template-columns:1fr minmax(min-content,max-content) 1fr}}

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

@@ -25,7 +25,7 @@ import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
 var styles = {
   root: "_nd5l8cbt _zulpu2gc _18zrutpp _179r7r9e _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
   fullHeightSidebar: "_179rglyw _bozgze3t _y4tiutpp _bfhkglyw _lcxvglyw _pdlmutpp",
-  fullHeightSidebarExpanded: "_1rqt15p1"
+  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
 };
 
 /**

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

@@ -3,12 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-/**
- * __TopNavStart__
- *
- * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
- */
-export declare function TopNavStart({ children, testId, sideNavToggleButton, }: {
+type TopNavStartProps = {
     /**
      * The content of the layout area.
      *
@@ -30,4 +25,11 @@ export declare function TopNavStart({ children, testId, sideNavToggleButton, }:
      * Consumers that do not need a toggle button can explicitly pass `null`.
      */
     sideNavToggleButton?: React.ReactNode;
-}): JSX.Element;
+};
+/**
+ * __TopNavStart__
+ *
+ * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
+ */
+export declare function TopNavStart({ children, testId, sideNavToggleButton }: TopNavStartProps): JSX.Element;
+export {};

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

@@ -3,12 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-/**
- * __TopNavStart__
- *
- * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
- */
-export declare function TopNavStart({ children, testId, sideNavToggleButton, }: {
+type TopNavStartProps = {
     /**
      * The content of the layout area.
      *
@@ -30,4 +25,11 @@ export declare function TopNavStart({ children, testId, sideNavToggleButton, }:
      * Consumers that do not need a toggle button can explicitly pass `null`.
      */
     sideNavToggleButton?: React.ReactNode;
-}): JSX.Element;
+};
+/**
+ * __TopNavStart__
+ *
+ * Wrapper for the top navigation actions on the inline-start (left) side of the top navigation.
+ */
+export declare function TopNavStart({ children, testId, sideNavToggleButton }: TopNavStartProps): JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.16.0",
+	"version": "2.18.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -71,7 +71,7 @@
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
-		"@atlaskit/icon": "^28.4.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",