@atlaskit/navigation-system 10.5.2 → 10.5.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 10.5.4
+
+### Patch Changes
+
+- [`88a1176b97a25`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/88a1176b97a25) -
+  Internal TypeScript typecheck fixes for ts7 (tsgo) adoption. No functional or API changes.
+- Updated dependencies
+
+## 10.5.3
+
+### Patch Changes
+
+- [`f2ec2ee8b495e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2ec2ee8b495e) -
+  Update `@atlaskit/spotlight` imports to use de-barrelled entry-points.
+- [`5d91339612c3b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d91339612c3b) -
+  Fix side nav rendering in the wrong grid area under streaming SSR, where Compiled could emit the
+  mobile and desktop `grid-area` atomic rules out of order. The mobile rule is now scoped to
+  `@media not (min-width: 64rem)` so it can never conflict with the desktop rule. Behind the
+  `platform_dst_nav4_side_nav_grid_area_fix` feature gate.
+- Updated dependencies
+
 ## 10.5.2
 
 ### Patch Changes

package/dist/cjs/components/skip-links/focus-element.js

@@ -48,7 +48,7 @@ function focusElement(element) {
   element.focus({
     // Forces the focus ring to appear after moving focus to the slot
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
-    // @ts-expect-error - new and not in types yet
+    // @ts-ignore - new and not in types yet. Can be removed once we adopt ts7.
     focusVisible: true
   });
 }

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

@@ -25,4 +25,5 @@
 @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)))}._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}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
+@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}}}

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

@@ -70,7 +70,7 @@ var panelSplitterPortalTargetStyles = {
   root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
 };
 var styles = {
-  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
+  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -87,6 +87,37 @@ var styles = {
   expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
   collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
 };
+
+/**
+ * Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
+ *
+ * The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
+ * desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
+ *
+ * Why this is needed:
+ * The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
+ * rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
+ * is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
+ * stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
+ * extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
+ * injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
+ * (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
+ * unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
+ *
+ * - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
+ * - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
+ *   of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
+ *   so insertion order no longer matters and the bug cannot occur.
+ *
+ * Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
+ * 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
+ *    `styles.root`.
+ * 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
+ */
+var gridAreaStyles = {
+  mobileLegacy: "_nd5l1b6c",
+  mobile: "_89fi1b6c"
+};
 var fallbackDefaultWidth = 320;
 var onPeekStartDelayMs = exports.onPeekStartDelayMs = 500;
 
@@ -760,7 +791,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, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_grid_area_fix') ? gridAreaStyles.mobile : gridAreaStyles.mobileLegacy, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/_react.default.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
     variableName: _constants.sideNavLiveWidthVar,
     value: "0px",

package/dist/cjs/ui/top-nav-items/themed/use-custom-theme-new.js

@@ -8,7 +8,7 @@ exports.useCustomThemeNew = useCustomThemeNew;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _appProvider = require("@atlaskit/app-provider");
-var _tokens = require("@atlaskit/tokens");
+var _getTokenValue = require("@atlaskit/tokens/get-token-value");
 var _hex = require("./color-utils/formats/hex");
 var _useCustomTheme = require("./use-custom-theme");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -41,7 +41,7 @@ function useCustomThemeNew(theme) {
     if (!value.isEnabled) {
       return true;
     }
-    var defaultBackground = (0, _hex.parseHex)((0, _tokens.getTokenValue)('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    var defaultBackground = (0, _hex.parseHex)((0, _getTokenValue.getTokenValue)('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
     return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
   }, [value, colorMode]);
   if (value.isEnabled) {

package/dist/es2019/components/skip-links/focus-element.js

@@ -43,7 +43,7 @@ export function focusElement(element) {
   element.focus({
     // Forces the focus ring to appear after moving focus to the slot
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
-    // @ts-expect-error - new and not in types yet
+    // @ts-ignore - new and not in types yet. Can be removed once we adopt ts7.
     focusVisible: true
   });
 }

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

@@ -25,4 +25,5 @@
 @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)))}._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}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
+@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}}}

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

@@ -56,7 +56,7 @@ const panelSplitterPortalTargetStyles = {
   root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
 };
 const styles = {
-  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
+  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -73,6 +73,37 @@ const styles = {
   expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
   collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
 };
+
+/**
+ * Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
+ *
+ * The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
+ * desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
+ *
+ * Why this is needed:
+ * The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
+ * rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
+ * is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
+ * stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
+ * extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
+ * injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
+ * (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
+ * unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
+ *
+ * - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
+ * - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
+ *   of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
+ *   so insertion order no longer matters and the bug cannot occur.
+ *
+ * Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
+ * 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
+ *    `styles.root`.
+ * 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
+ */
+const gridAreaStyles = {
+  mobileLegacy: "_nd5l1b6c",
+  mobile: "_89fi1b6c"
+};
 const fallbackDefaultWidth = 320;
 export const onPeekStartDelayMs = 500;
 
@@ -750,7 +781,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, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, fg('platform_dst_nav4_side_nav_grid_area_fix') ? gridAreaStyles.mobile : gridAreaStyles.mobileLegacy, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/dist/es2019/ui/top-nav-items/themed/use-custom-theme-new.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useColorMode } from '@atlaskit/app-provider';
-import { getTokenValue } from '@atlaskit/tokens';
+import { getTokenValue } from '@atlaskit/tokens/get-token-value';
 import { parseHex } from './color-utils/formats/hex';
 import { useCustomTheme } from './use-custom-theme';
 function toRGBString({

package/dist/esm/components/skip-links/focus-element.js

@@ -43,7 +43,7 @@ export function focusElement(element) {
   element.focus({
     // Forces the focus ring to appear after moving focus to the slot
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
-    // @ts-expect-error - new and not in types yet
+    // @ts-ignore - new and not in types yet. Can be removed once we adopt ts7.
     focusVisible: true
   });
 }

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

@@ -25,4 +25,5 @@
 @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)))}._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}._vgub1mm8{transition-timing-function:cubic-bezier(0,.4,0,1)}._hh1u1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}@starting-style{._s2eg1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}._1sg8k0mc{grid-area:side-nav}._vgub1ku9{transition-timing-function:cubic-bezier(.6,0,0,1)}._hjoifnf5{transition-duration:.2s}}
 @media (prefers-reduced-motion:no-preference) and (not (min-width:64rem)){._aadi1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}}
+@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}}}

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

@@ -60,7 +60,7 @@ var panelSplitterPortalTargetStyles = {
   root: "_kqsw1n9t _1pbyegat _u7coidpf _t9ectl5p _4t3ieqxy _165t56xv _p0az1elq"
 };
 var styles = {
-  root: "_nd5l1b6c _191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
+  root: "_191wglyw _t51zglyw _bfhk1bhr _16qs130s _vchhusvi _4t3ieqxy _152timx3 _kqsw1if8 _1bsb1ego _1pbycs5v _14b5hc79 _qilnk0mc _p5clia51 _4ap3vuon _scbpglyw",
   flyoutOpen: "_qiln1gzg _p5clglyw _4ap31bhr _scbp130s _139f8iot _1tpvfnf5 _sylc1a5r _oyeijq3t",
   flyoutAnimateClosed: "_1e0cglyw _qiln1gzg _139f8iot _1tpvfnf5 _sylc1a5r _1uwsjq3t",
   animationRTLSupport: "_15yekb7n _65m41mrw",
@@ -77,6 +77,37 @@ var styles = {
   expandAnimationDesktop: "_1sg8k0mc _vgub1ku9 _s2eg1p9u",
   collapseAnimationDesktop: "_1sg81gzg _vgub1mm8 _hh1u1p9u"
 };
+
+/**
+ * Workaround for non-deterministic Compiled style ordering in local development. See MAGMA-4606.
+ *
+ * The mobile `grid-area` for the side nav, split out from `styles.root` so it can be gated. The
+ * desktop rule (`gridArea: 'side-nav'`) lives in `styles.root` inside `@media (min-width: 64rem)`.
+ *
+ * Why this is needed:
+ * The mobile rule (unscoped) and the desktop rule (`@media (min-width: 64rem)`) compile to two atomic
+ * rules of equal specificity — a `@media` query adds no specificity — so at desktop widths the winner
+ * is decided purely by stylesheet insertion order (last wins). In production this is fine: Compiled's
+ * stylesheet extraction sorts the media queries deterministically. But in local development stylesheet
+ * extraction is disabled (https://github.com/atlassian-labs/compiled/issues/1306), so styles are
+ * injected as inline `<style>` tags in whatever order components happen to render. Under streaming SSR
+ * (Suspense), the desktop rule can be emitted earlier on the page by another component, leaving the
+ * unscoped mobile rule last — so it wins on desktop and the side nav renders in the wrong grid area.
+ *
+ * - `mobileLegacy` (gate OFF): the original unscoped mobile rule, which exhibits the bug above.
+ * - `mobile` (gate ON): the mobile rule scoped to `@media not (min-width: 64rem)`, the exact inverse
+ *   of the desktop `@media (min-width: 64rem)` rule. The two can never both match at a given viewport,
+ *   so insertion order no longer matters and the bug cannot occur.
+ *
+ * Cleaning up `fg('platform_dst_nav4_side_nav_grid_area_fix')` (gate fully rolled out):
+ * 1. Move `gridAreaStyles.mobile`'s `@media not (min-width: 64rem)` grid-area rule back into
+ *    `styles.root`.
+ * 2. Delete this entire block (`gridAreaStyles`) and the `fg(...)` branch in the `css` prop below.
+ */
+var gridAreaStyles = {
+  mobileLegacy: "_nd5l1b6c",
+  mobile: "_89fi1b6c"
+};
 var fallbackDefaultWidth = 320;
 export var onPeekStartDelayMs = 500;
 
@@ -750,7 +781,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, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
+    className: ax([styles.root, fg('platform_dst_nav4_side_nav_grid_area_fix') ? gridAreaStyles.mobile : gridAreaStyles.mobileLegacy, isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileOnly, !isExpandedOnDesktop && isExpandedOnMobile && !isFlyoutVisible && styles.hiddenDesktopOnly, !isExpandedOnDesktop && !isExpandedOnMobile && !isFlyoutVisible && styles.hiddenMobileAndDesktop, isFhsEnabled && styles.animationRTLSupport, shouldShowSidebarToggleAnimation && styles.animationBaseStyles, isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.expandAnimationMobile, !isExpandedOnMobile && shouldShowSidebarToggleAnimation && styles.collapseAnimationMobile, isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.expandAnimationDesktop, !isExpandedOnDesktop && shouldShowSidebarToggleAnimation && styles.collapseAnimationDesktop, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFhsEnabled && styles.flyoutOpen, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFhsEnabled && styles.flyoutAnimateClosed, ((sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' || (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close') && !isFirefox && isFhsEnabled && styles.flyoutBaseStylesFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'open' && !isFirefox && isFhsEnabled && styles.flyoutOpenFullHeightSidebar, (sideNavState === null || sideNavState === void 0 ? void 0 : sideNavState.flyout) === 'triggered-animate-close' && !isFirefox && isFhsEnabled && styles.flyoutAnimateClosedFullHeightSidebar])
   }), /*#__PURE__*/React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
     variableName: sideNavLiveWidthVar,
     value: "0px",

package/dist/esm/ui/top-nav-items/themed/use-custom-theme-new.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useMemo } from 'react';
 import { useColorMode } from '@atlaskit/app-provider';
-import { getTokenValue } from '@atlaskit/tokens';
+import { getTokenValue } from '@atlaskit/tokens/get-token-value';
 import { parseHex } from './color-utils/formats/hex';
 import { useCustomTheme } from './use-custom-theme';
 function toRGBString(_ref) {

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

@@ -1,7 +1,6 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
- * @jsxFrag
  */
 import React from 'react';
 import type { CommonSlotProps } from '../types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.5.2",
+	"version": "10.5.4",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -69,7 +69,7 @@
 		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.2.0",
-		"@atlaskit/tokens": "^15.6.0",
+		"@atlaskit/tokens": "^15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -88,13 +88,13 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/badge": "^19.1.0",
 		"@atlaskit/banner": "^15.1.0",
-		"@atlaskit/breadcrumbs": "^17.4.0",
+		"@atlaskit/breadcrumbs": "^17.5.0",
 		"@atlaskit/dropdown-menu": "^17.1.0",
 		"@atlaskit/flag": "^18.1.0",
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/inline-dialog": "^19.1.0",
-		"@atlaskit/link": "^4.1.0",
+		"@atlaskit/link": "^4.3.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/menu": "^9.2.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
@@ -105,9 +105,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/select": "^22.5.0",
 		"@atlaskit/skeleton": "^4.2.0",
-		"@atlaskit/spotlight": "^2.1.0",
+		"@atlaskit/spotlight": "^3.0.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/top-layer": "^1.6.0",
+		"@atlaskit/top-layer": "^1.8.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/gemini": "^1.49.0",
 		"@atlassian/search-dialog": "^10.5.0",
@@ -164,6 +164,9 @@
 		"platform_dst_nav4_skip_link_a11y_1": {
 			"type": "boolean"
 		},
+		"platform_dst_nav4_side_nav_grid_area_fix": {
+			"type": "boolean"
+		},
 		"platform-dst-motion-uplift-button": {
 			"type": "boolean",
 			"referenceOnly": true