@atlaskit/page-layout 3.11.5 → 3.11.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/page-layout
 
+## 3.11.7
+
+### Patch Changes
+
+- [#103752](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103752)
+  [`4b581a9ac4abd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b581a9ac4abd) -
+  Testing behind an internal feature gate, a React 18 concurrent safe way to initialize the
+  LeftSidebar to avoid animation on hydration or initial client-side rendering.
+
+## 3.11.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.11.5
 
 ### Patch Changes

package/__perf__/utils/product-integration/atlassian-navigation.tsx

@@ -15,7 +15,7 @@ import {
 	Search,
 	Settings,
 } from '@atlaskit/atlassian-navigation';
-import Drawer from '@atlaskit/drawer';
+import { Drawer, DrawerCloseButton, DrawerContent, DrawerSidebar } from '@atlaskit/drawer/compiled';
 import { JiraIcon, JiraLogo } from '@atlaskit/logo';
 
 import { DefaultCreate } from './create';
@@ -55,7 +55,12 @@ const SearchDrawer = () => {
 				label="Search"
 			/>
 			<Drawer label={search} isOpen={isOpen} onClose={onClose}>
-				<div>{search}</div>
+				<DrawerSidebar>
+					<DrawerCloseButton />
+				</DrawerSidebar>
+				<DrawerContent>
+					<div>{search}</div>
+				</DrawerContent>
 			</Drawer>
 		</Fragment>
 	);

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

@@ -10,6 +10,7 @@ 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");
@@ -79,7 +80,8 @@ var LeftSidebar = function LeftSidebar(props) {
     flyoutLockCount = leftSidebarState.flyoutLockCount,
     isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
     leftSidebarWidth = leftSidebarState.leftSidebarWidth,
-    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth;
+    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
+    hasInit = leftSidebarState.hasInit;
   var isLocked = flyoutLockCount > 0;
   var isLockedRef = (0, _react.useRef)(isLocked);
   var mouseXRef = (0, _react.useRef)(0);
@@ -144,7 +146,8 @@ var LeftSidebar = function LeftSidebar(props) {
       leftSidebarWidth: leftSidebarWidth,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       flyoutLockCount: 0,
-      isFixed: isFixed
+      isFixed: isFixed,
+      hasInit: true
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -282,6 +285,9 @@ var LeftSidebar = function LeftSidebar(props) {
     onClose: closeMobileFlyout,
     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;
   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.
@@ -304,7 +310,7 @@ var LeftSidebar = function LeftSidebar(props) {
     isFixed: isFixed
   }, (0, _react2.jsx)(_slotDimensions.default, {
     variableName: _constants.VAR_LEFT_SIDEBAR_WIDTH,
-    value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount,
+    value: isReady ? leftSidebarWidth : leftSidebarWidthOnMount,
     mobileValue: _constants.MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH
   }), (0, _react2.jsx)(_leftSidebarInner.default, {
     isFixed: isFixed,
@@ -312,7 +318,7 @@ var LeftSidebar = function LeftSidebar(props) {
   }, (0, _react2.jsx)(_resizableChildrenWrapper.default, {
     isFlyoutOpen: isFlyoutOpen,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed',
+    hasCollapsedState: !isReady && collapsedState === 'collapsed',
     testId: testId && "".concat(testId, "-resize-children-wrapper")
   }, children), (0, _react2.jsx)(_resizeControl.default, {
     testId: testId,

package/dist/cjs/controllers/sidebar-resize-context.js

@@ -19,7 +19,8 @@ var leftSidebarState = {
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
-  isFixed: true
+  isFixed: true,
+  hasInit: false
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/controllers/sidebar-resize-controller.js

@@ -36,7 +36,8 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
       leftSidebarWidth: 0,
       lastLeftSidebarWidth: 0,
       flyoutLockCount: 0,
-      isFixed: true
+      isFixed: true,
+      hasInit: false
     }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     leftSidebarState = _useState2[0],
@@ -47,7 +48,8 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
     flyoutLockCount = leftSidebarState.flyoutLockCount,
     isFixed = leftSidebarState.isFixed,
     isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
-    isFlyoutOpen = leftSidebarState.isFlyoutOpen;
+    isFlyoutOpen = leftSidebarState.isFlyoutOpen,
+    hasInit = leftSidebarState.hasInit;
 
   // We put the latest callbacks into a ref so we can always have the latest
   // functions in our transitionend listeners
@@ -81,7 +83,8 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
         lastLeftSidebarWidth: leftSidebarWidth,
         isFlyoutOpen: true,
         flyoutLockCount: 0,
-        isFixed: isFixed
+        isFixed: isFixed,
+        hasInit: hasInit
       };
       setLeftSidebarState(flyoutOpenSidebarState);
 
@@ -106,7 +109,8 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       isResizing: isResizing,
       flyoutLockCount: flyoutLockCount,
-      isFixed: isFixed
+      isFixed: isFixed,
+      hasInit: hasInit
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
@@ -139,7 +143,7 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
       }
     };
     transition.current = value;
-  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth, hasInit]);
   var collapseLeftSidebar = (0, _react.useCallback)(function (event, collapseWithoutTransition) {
     var _transition$current6, _transition$current7;
     if (!isOpen) {
@@ -157,7 +161,8 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
         lastLeftSidebarWidth: lastLeftSidebarWidth,
         isFlyoutOpen: false,
         flyoutLockCount: 0,
-        isFixed: isFixed
+        isFixed: isFixed,
+        hasInit: hasInit
       };
       setLeftSidebarState(flyoutCloseSidebarState);
 
@@ -185,7 +190,8 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing: isResizing,
       flyoutLockCount: flyoutLockCount,
-      isFixed: isFixed
+      isFixed: isFixed,
+      hasInit: hasInit
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
@@ -219,7 +225,7 @@ var SidebarResizeController = exports.SidebarResizeController = function Sidebar
       }
     };
     transition.current = value;
-  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth, hasInit]);
 
   /**
    * Conditionally toggle the expanding or collapsing the sidebars.

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

@@ -9,6 +9,7 @@ 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';
@@ -76,7 +77,8 @@ const LeftSidebar = props => {
     flyoutLockCount,
     isLeftSidebarCollapsed,
     leftSidebarWidth,
-    lastLeftSidebarWidth
+    lastLeftSidebarWidth,
+    hasInit
   } = leftSidebarState;
   const isLocked = flyoutLockCount > 0;
   const isLockedRef = useRef(isLocked);
@@ -141,7 +143,8 @@ const LeftSidebar = props => {
       leftSidebarWidth,
       lastLeftSidebarWidth,
       flyoutLockCount: 0,
-      isFixed
+      isFixed,
+      hasInit: true
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -283,6 +286,9 @@ const LeftSidebar = props => {
     onClose: closeMobileFlyout,
     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;
   return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.
@@ -305,7 +311,7 @@ const LeftSidebar = props => {
     isFixed: isFixed
   }, jsx(SlotDimensions, {
     variableName: VAR_LEFT_SIDEBAR_WIDTH,
-    value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount,
+    value: isReady ? leftSidebarWidth : leftSidebarWidthOnMount,
     mobileValue: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH
   }), jsx(LeftSidebarInner, {
     isFixed: isFixed,
@@ -313,7 +319,7 @@ const LeftSidebar = props => {
   }, jsx(ResizableChildrenWrapper, {
     isFlyoutOpen: isFlyoutOpen,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed',
+    hasCollapsedState: !isReady && collapsedState === 'collapsed',
     testId: testId && `${testId}-resize-children-wrapper`
   }, children), jsx(ResizeControl, {
     testId: testId,

package/dist/es2019/controllers/sidebar-resize-context.js

@@ -7,7 +7,8 @@ const leftSidebarState = {
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
-  isFixed: true
+  isFixed: true,
+  hasInit: false
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/controllers/sidebar-resize-controller.js

@@ -24,7 +24,8 @@ export const SidebarResizeController = ({
     leftSidebarWidth: 0,
     lastLeftSidebarWidth: 0,
     flyoutLockCount: 0,
-    isFixed: true
+    isFixed: true,
+    hasInit: false
   });
   const {
     leftSidebarWidth,
@@ -33,7 +34,8 @@ export const SidebarResizeController = ({
     flyoutLockCount,
     isFixed,
     isLeftSidebarCollapsed,
-    isFlyoutOpen
+    isFlyoutOpen,
+    hasInit
   } = leftSidebarState;
 
   // We put the latest callbacks into a ref so we can always have the latest
@@ -68,7 +70,8 @@ export const SidebarResizeController = ({
         lastLeftSidebarWidth: leftSidebarWidth,
         isFlyoutOpen: true,
         flyoutLockCount: 0,
-        isFixed
+        isFixed,
+        hasInit
       };
       setLeftSidebarState(flyoutOpenSidebarState);
 
@@ -93,7 +96,8 @@ export const SidebarResizeController = ({
       lastLeftSidebarWidth,
       isResizing,
       flyoutLockCount,
-      isFixed
+      isFixed,
+      hasInit
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
@@ -126,7 +130,7 @@ export const SidebarResizeController = ({
       }
     };
     transition.current = value;
-  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth, hasInit]);
   const collapseLeftSidebar = useCallback((event, collapseWithoutTransition) => {
     var _transition$current6, _transition$current7;
     if (!isOpen) {
@@ -144,7 +148,8 @@ export const SidebarResizeController = ({
         lastLeftSidebarWidth,
         isFlyoutOpen: false,
         flyoutLockCount: 0,
-        isFixed
+        isFixed,
+        hasInit
       };
       setLeftSidebarState(flyoutCloseSidebarState);
 
@@ -172,7 +177,8 @@ export const SidebarResizeController = ({
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing,
       flyoutLockCount,
-      isFixed
+      isFixed,
+      hasInit
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
@@ -206,7 +212,7 @@ export const SidebarResizeController = ({
       }
     };
     transition.current = value;
-  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth, hasInit]);
 
   /**
    * Conditionally toggle the expanding or collapsing the sidebars.

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

@@ -12,6 +12,7 @@ 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';
@@ -76,7 +77,8 @@ var LeftSidebar = function LeftSidebar(props) {
     flyoutLockCount = leftSidebarState.flyoutLockCount,
     isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
     leftSidebarWidth = leftSidebarState.leftSidebarWidth,
-    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth;
+    lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
+    hasInit = leftSidebarState.hasInit;
   var isLocked = flyoutLockCount > 0;
   var isLockedRef = useRef(isLocked);
   var mouseXRef = useRef(0);
@@ -141,7 +143,8 @@ var LeftSidebar = function LeftSidebar(props) {
       leftSidebarWidth: leftSidebarWidth,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       flyoutLockCount: 0,
-      isFixed: isFixed
+      isFixed: isFixed,
+      hasInit: true
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -279,6 +282,9 @@ var LeftSidebar = function LeftSidebar(props) {
     onClose: closeMobileFlyout,
     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;
   return jsx(Fragment, null, (mobileMediaQuery === null || mobileMediaQuery === void 0 ? void 0 : mobileMediaQuery.matches) &&
   /**
    * On desktop, the `onClick` handlers controls the temporary flyout behavior.
@@ -301,7 +307,7 @@ var LeftSidebar = function LeftSidebar(props) {
     isFixed: isFixed
   }, jsx(SlotDimensions, {
     variableName: VAR_LEFT_SIDEBAR_WIDTH,
-    value: notFirstRun.current ? leftSidebarWidth : leftSidebarWidthOnMount,
+    value: isReady ? leftSidebarWidth : leftSidebarWidthOnMount,
     mobileValue: MOBILE_COLLAPSED_LEFT_SIDEBAR_WIDTH
   }), jsx(LeftSidebarInner, {
     isFixed: isFixed,
@@ -309,7 +315,7 @@ var LeftSidebar = function LeftSidebar(props) {
   }, jsx(ResizableChildrenWrapper, {
     isFlyoutOpen: isFlyoutOpen,
     isLeftSidebarCollapsed: isLeftSidebarCollapsed,
-    hasCollapsedState: !notFirstRun.current && collapsedState === 'collapsed',
+    hasCollapsedState: !isReady && collapsedState === 'collapsed',
     testId: testId && "".concat(testId, "-resize-children-wrapper")
   }, children), jsx(ResizeControl, {
     testId: testId,

package/dist/esm/controllers/sidebar-resize-context.js

@@ -12,7 +12,8 @@ var leftSidebarState = {
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
   flyoutLockCount: 0,
-  isFixed: true
+  isFixed: true,
+  hasInit: false
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/controllers/sidebar-resize-controller.js

@@ -26,7 +26,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: 0,
       lastLeftSidebarWidth: 0,
       flyoutLockCount: 0,
-      isFixed: true
+      isFixed: true,
+      hasInit: false
     }),
     _useState2 = _slicedToArray(_useState, 2),
     leftSidebarState = _useState2[0],
@@ -37,7 +38,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
     flyoutLockCount = leftSidebarState.flyoutLockCount,
     isFixed = leftSidebarState.isFixed,
     isLeftSidebarCollapsed = leftSidebarState.isLeftSidebarCollapsed,
-    isFlyoutOpen = leftSidebarState.isFlyoutOpen;
+    isFlyoutOpen = leftSidebarState.isFlyoutOpen,
+    hasInit = leftSidebarState.hasInit;
 
   // We put the latest callbacks into a ref so we can always have the latest
   // functions in our transitionend listeners
@@ -71,7 +73,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
         lastLeftSidebarWidth: leftSidebarWidth,
         isFlyoutOpen: true,
         flyoutLockCount: 0,
-        isFixed: isFixed
+        isFixed: isFixed,
+        hasInit: hasInit
       };
       setLeftSidebarState(flyoutOpenSidebarState);
 
@@ -96,7 +99,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       isResizing: isResizing,
       flyoutLockCount: flyoutLockCount,
-      isFixed: isFixed
+      isFixed: isFixed,
+      hasInit: hasInit
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
@@ -129,7 +133,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       }
     };
     transition.current = value;
-  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, lastLeftSidebarWidth, flyoutLockCount, isFixed, leftSidebarWidth, hasInit]);
   var collapseLeftSidebar = useCallback(function (event, collapseWithoutTransition) {
     var _transition$current6, _transition$current7;
     if (!isOpen) {
@@ -147,7 +151,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
         lastLeftSidebarWidth: lastLeftSidebarWidth,
         isFlyoutOpen: false,
         flyoutLockCount: 0,
-        isFixed: isFixed
+        isFixed: isFixed,
+        hasInit: hasInit
       };
       setLeftSidebarState(flyoutCloseSidebarState);
 
@@ -175,7 +180,8 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing: isResizing,
       flyoutLockCount: flyoutLockCount,
-      isFixed: isFixed
+      isFixed: isFixed,
+      hasInit: hasInit
     };
     setLeftSidebarState(updatedLeftSidebarState);
     function finish() {
@@ -209,7 +215,7 @@ export var SidebarResizeController = function SidebarResizeController(_ref) {
       }
     };
     transition.current = value;
-  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth]);
+  }, [isOpen, mobileMediaQuery, isResizing, isLeftSidebarCollapsed, leftSidebarWidth, flyoutLockCount, isFixed, lastLeftSidebarWidth, hasInit]);
 
   /**
    * Conditionally toggle the expanding or collapsing the sidebars.

package/dist/types/controllers/sidebar-resize-context.d.ts

@@ -7,6 +7,7 @@ export type LeftSidebarState = {
     lastLeftSidebarWidth: number;
     flyoutLockCount: number;
     isFixed: boolean;
+    hasInit: boolean;
 };
 export type SidebarResizeContextValue = {
     isLeftSidebarCollapsed: boolean;

package/dist/types-ts4.5/controllers/sidebar-resize-context.d.ts

@@ -7,6 +7,7 @@ export type LeftSidebarState = {
     lastLeftSidebarWidth: number;
     flyoutLockCount: number;
     isFixed: boolean;
+    hasInit: boolean;
 };
 export type SidebarResizeContextValue = {
     isLeftSidebarCollapsed: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "3.11.5",
+	"version": "3.11.7",
 	"description": "A collection of components which let you compose an application's page layout.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,12 +42,13 @@
 	"homepage": "https://atlassian.design/components/page-layout/",
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.3.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/link": "^2.0.0",
 		"@atlaskit/motion": "^1.9.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -62,7 +63,7 @@
 		"@af/integration-testing": "*",
 		"@atlaskit/atlassian-navigation": "^4.10.0",
 		"@atlaskit/atlassian-notifications": "^0.5.0",
-		"@atlaskit/drawer": "^9.2.0",
+		"@atlaskit/drawer": "^9.3.0",
 		"@atlaskit/logo": "^15.1.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/notification-indicator": "^9.4.0",
@@ -85,6 +86,9 @@
 	"platform-feature-flags": {
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
+		},
+		"platform_dst_concurrent_left_sidebar_width": {
+			"type": "boolean"
 		}
 	},
 	"keywords": [