@atlaskit/navigation-system 7.1.1 → 7.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "7.1.1",
+	"version": "7.1.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -109,7 +109,7 @@
 		"@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",
@@ -174,6 +174,9 @@
 		},
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
+		},
+		"navx-4418-fix-effect-state-updates-in-gsn": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/navigation-system"