@atlaskit/navigation-system 10.5.1 → 10.5.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlassian/navigation-system
 
+## 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
+
+- [`c84bd629439e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c84bd629439e0) -
+  Opt `IconRenderer` out of React Compiler memoization (`'use no memo'`). This file is a copy of
+  `@atlaskit/button`'s `IconRenderer`, sharing the same `isIconRenderProp()` heuristic that
+  misclassifies icon components missing a `displayName` as render-props and invokes them as plain
+  functions instead of JSX. Under React Compiler, memoization of this render could skip re-invoking
+  an already-compiled icon component on some renders, dropping a hook call and causing a hook-count
+  mismatch (React error #300).
+- Updated dependencies
+
 ## 10.5.1
 
 ### Patch Changes

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/icon-renderer.js

@@ -28,6 +28,9 @@ function isIconRenderProp(func) {
  *
  */
 var IconRenderer = function IconRenderer(_ref) {
+  // React Compiler opt-out: RC-incompatible (memoization breaks runtime behaviour).
+  'use no memo';
+
   var Icon = _ref.icon;
   var isRenderProp = isIconRenderProp(Icon);
   var iconProps = {

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/icon-renderer.js

@@ -23,6 +23,9 @@ function isIconRenderProp(func) {
 const IconRenderer = ({
   icon: Icon
 }) => {
+  // React Compiler opt-out: RC-incompatible (memoization breaks runtime behaviour).
+  'use no memo';
+
   const isRenderProp = isIconRenderProp(Icon);
   let iconProps = {
     label: '',

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/icon-renderer.js

@@ -21,6 +21,9 @@ function isIconRenderProp(func) {
  *
  */
 var IconRenderer = function IconRenderer(_ref) {
+  // React Compiler opt-out: RC-incompatible (memoization breaks runtime behaviour).
+  'use no memo';
+
   var Icon = _ref.icon;
   var isRenderProp = isIconRenderProp(Icon);
   var iconProps = {

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.1",
+	"version": "10.5.3",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -53,7 +53,7 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^12.2.0",
+		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/app-provider": "^5.1.0",
 		"@atlaskit/avatar": "^26.1.0",
 		"@atlaskit/button": "^24.3.0",
@@ -66,10 +66,10 @@
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
-		"@atlaskit/primitives": "^20.5.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.2.0",
-		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/tokens": "^15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -88,24 +88,24 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/badge": "^19.1.0",
 		"@atlaskit/banner": "^15.1.0",
-		"@atlaskit/breadcrumbs": "^17.3.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",
 		"@atlaskit/onboarding": "^15.1.0",
 		"@atlaskit/page-header": "^13.1.0",
 		"@atlaskit/page-layout": "^5.2.0",
-		"@atlaskit/popper": "^8.2.0",
+		"@atlaskit/popper": "^8.3.0",
 		"@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",
 		"@atlassian/feature-flags-test-utils": "^1.2.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