@atlaskit/navigation-system 7.1.0 → 7.1.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlassian/navigation-system
 
+## 7.1.2
+
+### Patch Changes
+
+- [`5aec10fd5955e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5aec10fd5955e) -
+  Wrap useEffect->set-state call in startTransition, to avoid potential hydration rework.
+
+## 7.1.1
+
+### Patch Changes
+
+- [`3088f1c2a117a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3088f1c2a117a) -
+  Cleanup platform_editor_topnavstart_delay_browser_check flag
+
 ## 7.1.0
 
 ### Minor Changes

package/constellation/layout/examples.mdx

@@ -27,17 +27,16 @@ When composing your page layout ensure that:
 These are the distinct areas in the layout. These components are designed to contain other
 components and content.
 
-For examples see
-[ready-made navigation experiences (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
+[View ready-made navigation experiences](https://hello.atlassian.net/wiki/x/rBE7MAE)
 
 ### Banner
 
-Use the `Banner` area to render a [banner](/components/banner) component. It will always display at
+Use the banner area to render a [banner](/components/banner) component. It will always display at
 the top of the screen.
 
 ### Top nav
 
-Use the `TopNav` to render [top nav items](/components/navigation-system/top-nav-items).
+Use the top nav area to render [top nav items](/components/navigation-system/top-nav-items).
 
 - It will display at the top of the screen, below the banner if one is present. It has a fixed
   height of 48px.
@@ -47,12 +46,12 @@ Use the `TopNav` to render [top nav items](/components/navigation-system/top-nav
 
 #### Top nav slots
 
-The TopNav has three layout components that you must use to position
+The top nav has three layout components that you must use to position
 [top nav items](/components/navigation-system/top-nav-items) within the top nav flexbox.
 
-- `TopNavStart`. Area for left-aligned items.
-- `TopNavMiddle`. Area for centre-aligned items.
-- `TopNavEnd`. Area for right-aligned items.
+- `TopNavStart`: Area for left-aligned items.
+- `TopNavMiddle`: Area for centre-aligned items.
+- `TopNavEnd`: Area for right-aligned items.
 
 #### Top nav custom theming
 
@@ -60,7 +59,7 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 
 ### Side nav
 
-- Use the `SideNav` to
+- Use the side nav area to
   render [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). It
   will show on the left of the screen. The default width of the side nav is 320px.
 - Use the [side nav slots](#side-nav-slots) to position content within the side nav.
@@ -68,13 +67,13 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 
 #### Side nav slots
 
-The `SideNav` has three layout components that you can use to position components within the side
-nav flexbox.
+The side nav has three layout components that you can use to position components within the side nav
+flexbox.
 
-- `SideNavHeader`. The top part of the side nav.
-- `SideNavBody`. The middle part of the side nav. It acts as a scroll container. It will grow to
+- `SideNavHeader`: The top part of the side nav.
+- `SideNavBody`: The middle part of the side nav. It acts as a scroll container. It will grow to
   take up the available space — this is used to push the footer to the bottom of the side nav.
-- `SideNavFooter`. The bottom part of the side nav.
+- `SideNavFooter`: The bottom part of the side nav.
 
 Note: make sure to render `SideNavBody` to ensure that the footer is positioned at the bottom of the
 side nav, simulating a sticky footer.
@@ -116,13 +115,13 @@ This is useful for toggling the side nav based on a keyboard shortcut.
 - In the collapsed state, hovering over the `SideNavToggleButton` from
   [top nav items](/components/navigation-system/top-nav-items/examples#start-items) will trigger the
   side nav to open as an overlay. Moving the curser away will close it. If there are any open
-  supported ADS layering components (e.g. Popups, Dropdown menus) within the side nav, the flyout
+  supported ADS layering components (e.g. popups, dropdown menus) within the side nav, the flyout
   will stay locked open, until the layering components are closed.
 
 - The expansion and collapse of the side nav flyout is animated on **supported browsers**.
   Currently, Firefox does not support the animation. Instead, it will instantly expand and collapse.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Side nav resizing
 
@@ -135,7 +134,7 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
   tooltips) will be closed.
 - The side nav panel splitter can be also double clicked to collapse the side nav.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Side nav responsive
 
@@ -146,14 +145,14 @@ See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-in
 - At `xs` and `xxs` breakpoints (i.e. viewports smaller than 768px), the max width of the overlay
   side nav is either 320px or 90% of the screen width - whichever value is smaller.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 ### Main
 
-Use `Main` for the [page header](/components/page-header) and main page content. It will expand to
-fill available space.
+Use the main area for the [page header](/components/page-header) and main page content. It will
+expand to fill available space.
 
-- On large viewports `Main` can be fixed, meaning it will have its own scroll container and not use
+- On large viewports main can be fixed, meaning it will have its own scroll container and not use
   the body scroll.
 - On small viewports, the element will always use body scroll, to make it easier to scroll the page
   when the content is tall.
@@ -161,43 +160,43 @@ fill available space.
 ### Aside
 
 <SectionMessage appearance="warning" title="Caution">
-	We are planning on deprecating the Aside component. Please use Panel instead.
+	We are planning on deprecating the aside component. Please use panel instead.
 </SectionMessage>
 
-`Aside` is rendered to the right of the `Main` area.
+The aside area is rendered to the right of the main area.
 
-- The default width of the Aside is 330px, and it is
+- The default width of the aside is 330px, and it is
   [resizable](/components/navigation-system/layout/examples#aside-resizing) and
   [responsive](/components/navigation-system/layout/examples#aside-responsive).
-- On large viewports the Aside can be fixed, meaning it will have its own scroll container and not
+- On large viewports the aside can be fixed, meaning it will have its own scroll container and not
   use the body scroll.
 - On small viewports, the element will always use body scroll, to make it easier to scroll the page
   when the content is tall.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Aside resizing
 
-You can optionally render a [panel splitter](#resizable-areas) as a child to make the `Aside`
+You can optionally render a [panel splitter](#resizable-areas) as a child to make the aside
 resizable.
 
 - It is resized using the drag handle. When hovering on the drag handle the mouse pointer changes to
   a resize pointer.
-- The `Aside` can be resized to a minimum width of 120px, and a maximum width equal to 50% of the
+- The aside can be resized to a minimum width of 120px, and a maximum width equal to 50% of the
   total viewport width. It retains this resized width even after refreshing the page.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Aside responsive
 
-At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the `Aside` moves below
-the `Main` area, and conforms to `Main` width and behaviour.
+At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the aside moves below the
+main area, and conforms to main width and behaviour.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 ### Panel
 
-The `Panel` is rendered to the right of the `Main` and `Aside` areas.
+The panel area is rendered to the right of the main and aside areas.
 
 - The default width of the panel is 365px, which can be modified using the `defaultWidth` prop.
 - The panel is
@@ -206,13 +205,13 @@ The `Panel` is rendered to the right of the `Main` and `Aside` areas.
   [responsive](/components/navigation-system/layout/examples#panel-responsive).
 
 Common usage is to house
-[Preview panel (Atlassians only)](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)
+[Preview panel](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)
 
 #### Panel collapse/expand
 
 The panel can be collapsed and expanded using a trigger of your choosing.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Panel resizing
 
@@ -221,18 +220,18 @@ resizable. It can be resized using the drag handle. When hovering on the drag ha
 pointer changes to a resize pointer.
 
 - The panel can be resized larger than the `defaultWidth` to a maximum of 50% of content area
-  (viewport minus `SideNav`).
+  (viewport minus the side nav area).
 - It retains this resized width even after collapsing, reopening, or refreshing the page.
 - It has no ability to resize smaller than `defaultWidth`.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 #### Panel responsive
 
-At `m` breakpoints (between 1024-1440px), the `Panel` will overlay `Aside`. At `s` breakpoints and
-below (less than 1024px) it will start to overlay the `Main` area.
+At `m` breakpoints (between 1024-1440px), the panel will overlay the aside area. At `s` breakpoints
+and below (less than 1024px) it will start to overlay the main area.
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
 ## Resizable areas
 
@@ -240,31 +239,31 @@ Render a `PanelSplitter` in a layout area to make it resizable.
 
 Resizing is supported for the following areas:
 
-- [SideNav](/components/navigation-system/layout/examples#side-nav) - use `SideNavPanelSplitter`
+- [Side nav](/components/navigation-system/layout/examples#side-nav) - use `SideNavPanelSplitter`
 - [Aside](/components/navigation-system/layout/examples#aside) - use `PanelSplitter`
 - [Panel](/components/navigation-system/layout/examples#panel) - use `PanelSplitter`
 
-See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
+[View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
-| Area      | Default width      | Min width             | Max width                                    |
-| --------- | ------------------ | --------------------- | -------------------------------------------- |
-| `SideNav` | 320px              | 240px                 | 50% of viewport width                        |
-| `Aside`   | 330px (modifiable) | 120px                 | 50% of viewport width                        |
-| `Panel`   | 365px (modifiable) | Same as default width | 50% of content area (viewport minus SideNav) |
+| Area      | Default width      | Min width             | Max width                                              |
+| --------- | ------------------ | --------------------- | ------------------------------------------------------ |
+| `SideNav` | 320px              | 240px                 | 50% of viewport width                                  |
+| `Aside`   | 330px (modifiable) | 120px                 | 50% of viewport width                                  |
+| `Panel`   | 365px (modifiable) | Same as default width | 50% of content area (viewport minus the side nav area) |
 
 ## Responsive
 
 Layout areas respond to the viewport size. See default behaviour below, or the
-[interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
-
-| Breakpoint | Viewport      | Side nav                    | Aside        | Panel                                                       |
-| ---------- | ------------- | --------------------------- | ------------ | ----------------------------------------------------------- |
-| `xxs`      | 320 - 479px   | Collapsed; opens as overlay | Below Main   | Collapsed; opens as overlay (over Main)                     |
-| `xs`       | 480 - 767px   | Collapsed; opens as overlay | Below Main   | Collapsed; opens as overlay (over Main)                     |
-| `s`        | 768 - 1023px  | Collapsed; opens as overlay | Below Main   | Collapsed; opens as overlay (over Main)                     |
-| `m`        | 1024 - 1439px | Expanded (inline)           | Next to Main | Collapsed; opens inline (or as overlay if Aside is present) |
-| `l`        | 1440 - 1767px | Expanded (inline)           | Next to Main | Collapsed; Opens inline                                     |
-| `xl`       | 1768+px       | Expanded (inline)           | Next to Main | Collapsed; Opens inline                                     |
+[interactive example](https://go.atlassian.com/nav4-interactive-example).
+
+| Breakpoint | Viewport      | Side nav                    | Aside        | Panel                                                                |
+| ---------- | ------------- | --------------------------- | ------------ | -------------------------------------------------------------------- |
+| `xxs`      | 320 - 479px   | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
+| `xs`       | 480 - 767px   | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
+| `s`        | 768 - 1023px  | Collapsed; opens as overlay | Below main   | Collapsed; opens as overlay (over the main area)                     |
+| `m`        | 1024 - 1439px | Expanded (inline)           | Next to main | Collapsed; opens inline (or as overlay if the aside area is present) |
+| `l`        | 1440 - 1767px | Expanded (inline)           | Next to main | Collapsed; Opens inline                                              |
+| `xl`       | 1768+px       | Expanded (inline)           | Next to main | Collapsed; Opens inline                                              |
 
 ## Custom skip links
 

package/constellation/layout/usage.mdx

@@ -39,9 +39,9 @@ When applying components to the navigational areas,
 		</ol>
 	</li>
 	<li>
-		<strong>Side nav:</strong> Use to display [side nav
-		items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). Is resizable and
-		collapsible.
+		<strong>Side nav:</strong> Use to display{' '}
+		<a href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items">side nav items</a>.
+		Is resizable and collapsible.
 		<ol type="a" start="4">
 			<li>
 				<strong>Side nav header:</strong> Optional. Top part of the side nav (fixed).
@@ -60,7 +60,7 @@ When applying components to the navigational areas,
 	</li>
 	<li>
 		<strong>Aside:</strong> Optional. Use to display supporting or supplementary content. Is
-		resizable. <em>We plan to deprecate this component, please use Panel instead.</em>
+		resizable. <em>We plan to deprecate this component, please use panel instead.</em>
 	</li>
 	<li>
 		<strong>Panel:</strong> Optional. Use to display supporting or supplementary content. Is
@@ -68,33 +68,33 @@ When applying components to the navigational areas,
 	</li>
 </ol>
 
-### The difference between Aside, Panel and Modal dialog
+### The difference between aside, panel and modal dialog
 
 <SectionMessage appearance="warning" title="Caution">
-	We are planning on deprecating the Aside component. Please use Panel instead.
+	We are planning on deprecating the aside component. Please use panel instead.
 </SectionMessage>
 
-The main difference between Aside, Panel and Modal dialog is their behaviours:
+The main difference between aside, panel and modal dialog is their behaviours:
 
-- **Aside** is not collapsible, while **Panel** can be collapsible.
-- **Panel** and **Aside** present content alongside the **Main** area, while **Modal dialog** exists
+- **Aside** is not collapsible, while **panel** can be collapsible.
+- **Panel** and **aside** present content alongside the **main** area, while **modal dialog** exists
   in a layer above the page.
-- On small viewports (1024px and below), the **Panel** becomes an overlay, while the **Aside** moves
-  below **Main**.
+- On small viewports (1024px and below), the **panel** becomes an overlay, while the **aside** moves
+  below **main**.
 
 #### Usage guidance:
 
-- Use **Aside** for content that needs to be constantly visible and accessible without requiring the
+- Use **aside** for content that needs to be constantly visible and accessible without requiring the
   user to open it, or have the ability to close it.
-- Use **Panel** for contextual information or tertiary actions that complement the user's workflow.
+- Use **panel** for contextual information or tertiary actions that complement the user's workflow.
   Panels enable greater multitasking by functioning as an additional work space, while keeping users
   connected to their primary task.
-- Use **Modal dialog** when you need your user to focus their attention on a single or specific
+- Use **modal dialog** when you need your user to focus their attention on a single or specific
   task, like requiring a decision or action before they can return to their primary task.
 
 ## Best practices
 
-### Design using grid in the Main area
+### Design using grid in the main area
 
 <DoDontGrid>
 	<DoDont
@@ -105,8 +105,8 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
 		}}
 		isFullWidth
 	>
-		When designing, use <a href="/foundations/grid-beta">Grid</a> to position content within the
-		Main area only.
+		When designing, use <a href="/foundations/grid-beta">grid</a> to position content within the
+		main area only.
 	</DoDont>
 	<DoDont
 		type="dont"
@@ -116,7 +116,7 @@ The main difference between Aside, Panel and Modal dialog is their behaviours:
 		}}
 		isFullWidth
 	>
-		Don't include Side nav, Aside or Panel areas as part of your Grid.
+		Don't include side nav, aside or panel areas as part of your grid.
 	</DoDont>
 </DoDontGrid>
 

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

@@ -357,12 +357,23 @@ function SideNavInternal(_ref) {
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    setSideNavState({
-      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-      mobile: 'collapsed',
-      flyout: 'closed',
-      lastTrigger: null
-    });
+    if ((0, _platformFeatureFlags.fg)('navx-4418-fix-effect-state-updates-in-gsn')) {
+      (0, _react.startTransition)(function () {
+        setSideNavState({
+          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+          mobile: 'collapsed',
+          flyout: 'closed',
+          lastTrigger: null
+        });
+      });
+    } else {
+      setSideNavState({
+        desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+        mobile: 'collapsed',
+        flyout: 'closed',
+        lastTrigger: null
+      });
+    }
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = (0, _react.useCallback)(function (_ref2) {
     var screen = _ref2.screen,

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

@@ -13,7 +13,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
-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 _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
@@ -154,9 +153,6 @@ function TopNavStart(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_topnavstart_delay_browser_check')) {
-    isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
   var ref = (0, _react.useContext)(_topNavStartContext.TopNavStartAttachRef);
   var elementRef = (0, _react.useRef)(null);

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

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./side-nav.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { startTransition, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -338,12 +338,23 @@ function SideNavInternal({
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    setSideNavState({
-      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-      mobile: 'collapsed',
-      flyout: 'closed',
-      lastTrigger: null
-    });
+    if (fg('navx-4418-fix-effect-state-updates-in-gsn')) {
+      startTransition(() => {
+        setSideNavState({
+          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+          mobile: 'collapsed',
+          flyout: 'closed',
+          lastTrigger: null
+        });
+      });
+    } else {
+      setSideNavState({
+        desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+        mobile: 'collapsed',
+        flyout: 'closed',
+        lastTrigger: null
+      });
+    }
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   const handleExpand = useCallback(({
     screen,

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

@@ -4,7 +4,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
@@ -149,9 +148,6 @@ export function TopNavStart({
   testId,
   sideNavToggleButton
 }) {
-  if (fg('platform_editor_topnavstart_delay_browser_check')) {
-    isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   const isFhsEnabled = useIsFhsEnabled();
   const ref = useContext(TopNavStartAttachRef);
   const elementRef = useRef(null);

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

@@ -6,7 +6,7 @@ import "./side-nav.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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; }
 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 React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { startTransition, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { flushSync } from 'react-dom';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -347,12 +347,23 @@ function SideNavInternal(_ref) {
 
     // Sync the visibility in context (provided in `<Root>`) with the local `defaultCollapsed` prop provided to `SideNav`
     // after SSR hydration. This should only run once, after the initial render on the client.
-    setSideNavState({
-      desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
-      mobile: 'collapsed',
-      flyout: 'closed',
-      lastTrigger: null
-    });
+    if (fg('navx-4418-fix-effect-state-updates-in-gsn')) {
+      startTransition(function () {
+        setSideNavState({
+          desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+          mobile: 'collapsed',
+          flyout: 'closed',
+          lastTrigger: null
+        });
+      });
+    } else {
+      setSideNavState({
+        desktop: initialDefaultCollapsed ? 'collapsed' : 'expanded',
+        mobile: 'collapsed',
+        flyout: 'closed',
+        lastTrigger: null
+      });
+    }
   }, [initialDefaultCollapsed, setSideNavState, sideNavState]);
   var handleExpand = useCallback(function (_ref2) {
     var screen = _ref2.screen,

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

@@ -5,7 +5,6 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery } from '@atlaskit/primitives/compiled';
 import { TopNavStartAttachRef } from '../../../context/top-nav-start/top-nav-start-context';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
@@ -146,9 +145,6 @@ export function TopNavStart(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId,
     sideNavToggleButton = _ref3.sideNavToggleButton;
-  if (fg('platform_editor_topnavstart_delay_browser_check')) {
-    isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  }
   var isFhsEnabled = useIsFhsEnabled();
   var ref = useContext(TopNavStartAttachRef);
   var elementRef = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "7.1.0",
+	"version": "7.1.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -64,19 +64,19 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/avatar": "^25.10.0",
+		"@atlaskit/avatar": "^25.11.0",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
-		"@atlaskit/icon": "^33.0.0",
+		"@atlaskit/icon": "^33.1.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/logo": "^19.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
-		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/side-nav-items": "^1.12.0",
-		"@atlaskit/tokens": "^11.2.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -96,29 +96,29 @@
 		"@atlaskit/app-provider": "^4.1.0",
 		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/banner": "^14.0.0",
-		"@atlaskit/breadcrumbs": "^15.3.0",
+		"@atlaskit/breadcrumbs": "^16.0.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/lozenge": "^13.5.0",
 		"@atlaskit/menu": "^8.4.0",
-		"@atlaskit/modal-dialog": "^14.12.0",
+		"@atlaskit/modal-dialog": "^14.13.0",
 		"@atlaskit/onboarding": "^14.5.0",
 		"@atlaskit/page-header": "^12.1.0",
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/select": "^21.8.0",
+		"@atlaskit/select": "^21.9.0",
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/gemini": "^1.38.0",
-		"@atlassian/search-dialog": "^9.16.0",
+		"@atlassian/search-dialog": "^9.18.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
-		"@axe-core/playwright": "^4.8.0",
+		"@axe-core/playwright": "^4.11.1",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"raf-stub": "^2.0.1",
@@ -175,7 +175,7 @@
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
 		},
-		"platform_editor_topnavstart_delay_browser_check": {
+		"navx-4418-fix-effect-state-updates-in-gsn": {
 			"type": "boolean"
 		}
 	},