@atlaskit/page-layout 4.1.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/page-layout
 
+## 4.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.0
+
+### Minor Changes
+
+- [#147520](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147520)
+  [`88b9a0365fd5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/88b9a0365fd5a) -
+  Fixes the Left Sidebar with React 18 concurrent rendering turned on as client-side initialization
+  animates the width of the left sidebar causing massive repaints and performance issues due to
+  non-concurrent-safe logic. This delays the animation until that initialization has happened.
+
+  This has no expected breaking changes, only a possible fix with concurrency.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.0
 
 ### Minor Changes

package/dist/cjs/components/slots/left-sidebar.js

@@ -10,7 +10,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/use-close-on-escape-press"));
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _responsive = require("@atlaskit/primitives/responsive");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
@@ -286,8 +285,10 @@ var LeftSidebar = function LeftSidebar(props) {
     isDisabled: !isFlyoutOpen
   });
 
-  // We use both the state and our effect-based ref to protect animation until initialized fully
-  var isReady = (0, _platformFeatureFlags.fg)('platform_dst_concurrent_left_sidebar_width') ? hasInit && notFirstRun.current : notFirstRun.current;
+  /**
+   * We use both the state and our effect-based ref to protect animation until initialized fully
+   */
+  var isReady = hasInit && notFirstRun.current;
   return (0, _react2.jsx)(_react.Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.

package/dist/es2019/components/slots/left-sidebar.js

@@ -9,7 +9,6 @@ import { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { easeOut } from '@atlaskit/motion';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { N100A } from '@atlaskit/theme/colors';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
@@ -287,8 +286,10 @@ const LeftSidebar = props => {
     isDisabled: !isFlyoutOpen
   });
 
-  // We use both the state and our effect-based ref to protect animation until initialized fully
-  const isReady = fg('platform_dst_concurrent_left_sidebar_width') ? hasInit && notFirstRun.current : notFirstRun.current;
+  /**
+   * We use both the state and our effect-based ref to protect animation until initialized fully
+   */
+  const isReady = hasInit && notFirstRun.current;
   return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.

package/dist/esm/components/slots/left-sidebar.js

@@ -12,7 +12,6 @@ import { Fragment, useCallback, useContext, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import { easeOut } from '@atlaskit/motion';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/responsive';
 import { N100A } from '@atlaskit/theme/colors';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, FLYOUT_DELAY, MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH, RESIZE_BUTTON_SELECTOR, TRANSITION_DURATION, VAR_LEFT_SIDEBAR_FLYOUT, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
@@ -283,8 +282,10 @@ var LeftSidebar = function LeftSidebar(props) {
     isDisabled: !isFlyoutOpen
   });
 
-  // We use both the state and our effect-based ref to protect animation until initialized fully
-  var isReady = fg('platform_dst_concurrent_left_sidebar_width') ? hasInit && notFirstRun.current : notFirstRun.current;
+  /**
+   * We use both the state and our effect-based ref to protect animation until initialized fully
+   */
+  var isReady = hasInit && notFirstRun.current;
   return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "4.1.0",
+	"version": "4.2.1",
 	"description": "A collection of components which let you compose an application's page layout.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
 			"category": "Layout and structure",
 			"status": {
 				"type": "intent-to-deprecate",
-				"description": "We are in the process of building a new page layout component: [@atlassian/navigation-system](https://staging.atlassian.design/components/navigation-system/page-layout/examples) (For Atlassian employees only at this stage)"
+				"description": "We are in the process of building a new page layout component: [@atlassian/navigation-system](/components/navigation-system/page-layout/examples) (For Atlassian employees only at this stage)"
 			}
 		},
 		"runReact18": true
@@ -42,11 +42,11 @@
 	"homepage": "https://atlassian.design/components/page-layout/",
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon": "^26.0.0",
 		"@atlaskit/link": "^3.1.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.4.0",
+		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,11 +64,11 @@
 		"@atlaskit/atlassian-navigation": "^5.1.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/logo": "^16.0.0",
-		"@atlaskit/menu": "^3.2.0",
+		"@atlaskit/logo": "^18.0.0",
+		"@atlaskit/menu": "^5.0.0",
 		"@atlaskit/popup": "^4.1.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/side-navigation": "^8.0.0",
+		"@atlaskit/side-navigation": "^9.1.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/ssr-tests": "^0.2.0",
@@ -81,9 +81,6 @@
 	"platform-feature-flags": {
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
-		},
-		"platform_dst_concurrent_left_sidebar_width": {
-			"type": "boolean"
 		}
 	},
 	"keywords": [