@atlaskit/page-layout 3.11.6 → 3.11.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/page-layout
 
+## 3.11.8
+
+### Patch Changes
+
+- [#107520](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107520)
+  [`537278df4586e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/537278df4586e) -
+  Fixing A11y violation scrollable-region-focusable
+
+## 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

package/dist/cjs/components/slots/internal/resizable-children-wrapper.js

@@ -26,7 +26,7 @@ var prefersReducedMotionStyles = (0, _react.css)((0, _motion.prefersReducedMotio
  */
 var hideLeftSidebarContentsStyles = (0, _react.css)({
   opacity: 0,
-  transition: "opacity 0ms linear, visibility 0ms linear",
+  transition: 'opacity 0ms linear, visibility 0ms linear',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "".concat(_constants.TRANSITION_DURATION - 100, "ms"),
   visibility: 'hidden'
@@ -57,7 +57,8 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   return (0, _react.jsx)("div", {
     css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
     "aria-hidden": isHidden,
-    "data-testid": testId
+    "data-testid": testId,
+    tabIndex: isHidden ? -1 : 0
   }, (0, _react.jsx)("div", {
     css: fixedChildrenWrapperStyles
   }, children));

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/internal/resizable-children-wrapper.js

@@ -19,7 +19,7 @@ const prefersReducedMotionStyles = css(prefersReducedMotion());
  */
 const hideLeftSidebarContentsStyles = css({
   opacity: 0,
-  transition: `opacity 0ms linear, visibility 0ms linear`,
+  transition: 'opacity 0ms linear, visibility 0ms linear',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: `${TRANSITION_DURATION - 100}ms`,
   visibility: 'hidden'
@@ -48,7 +48,8 @@ const ResizableChildrenWrapper = ({
   return jsx("div", {
     css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
     "aria-hidden": isHidden,
-    "data-testid": testId
+    "data-testid": testId,
+    tabIndex: isHidden ? -1 : 0
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));

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/internal/resizable-children-wrapper.js

@@ -19,7 +19,7 @@ var prefersReducedMotionStyles = css(prefersReducedMotion());
  */
 var hideLeftSidebarContentsStyles = css({
   opacity: 0,
-  transition: "opacity 0ms linear, visibility 0ms linear",
+  transition: 'opacity 0ms linear, visibility 0ms linear',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transitionDelay: "".concat(TRANSITION_DURATION - 100, "ms"),
   visibility: 'hidden'
@@ -50,7 +50,8 @@ var ResizableChildrenWrapper = function ResizableChildrenWrapper(_ref) {
   return jsx("div", {
     css: [resizableChildrenWrapperStyles, isHidden && hideLeftSidebarContentsStyles, prefersReducedMotionStyles],
     "aria-hidden": isHidden,
-    "data-testid": testId
+    "data-testid": testId,
+    tabIndex: isHidden ? -1 : 0
   }, jsx("div", {
     css: fixedChildrenWrapperStyles
   }, children));

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.6",
+	"version": "3.11.8",
 	"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.3.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": "^3.0.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -68,7 +69,7 @@
 		"@atlaskit/notification-indicator": "^9.4.0",
 		"@atlaskit/notification-log-client": "^6.1.0",
 		"@atlaskit/popup": "^1.30.0",
-		"@atlaskit/side-navigation": "^3.6.0",
+		"@atlaskit/side-navigation": "^4.0.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/tooltip": "^19.0.0",
@@ -85,6 +86,9 @@
 	"platform-feature-flags": {
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
+		},
+		"platform_dst_concurrent_left_sidebar_width": {
+			"type": "boolean"
 		}
 	},
 	"keywords": [

package/__perf__/examples.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-
-import { findByTestId, findByText, fireEvent, getByTestId } from '@testing-library/dom'; // eslint-disable-line import/no-extraneous-dependencies
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance'; // eslint-disable-line import/no-extraneous-dependencies
-
-import ProductExample from './utils/perf-example';
-
-const interactionTasks: PublicInteractionTask[] = [
-	{
-		name: 'Side nav: Opening nested side nav',
-		description: 'Open a nested item in side-navigation',
-
-		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-			const element: HTMLElement | null = getByTestId(container, 'nav-side-queues--item');
-			fireEvent.click(element);
-			await findByText(container, 'Untriaged', undefined, { timeout: 2000 });
-		},
-	},
-	{
-		name: 'Global nav: Open dropdown',
-		description: 'Open a dropdown in side-navigation',
-
-		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-			const element: HTMLElement | null = getByTestId(container, 'nav-help');
-			fireEvent.click(element);
-			await findByTestId(container.parentElement || container, 'nav-help-content', undefined, {
-				timeout: 2000,
-			});
-		},
-	},
-	{
-		name: 'Global nav: Notifications',
-		description: 'Open the notifications panel in global navigation',
-
-		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-			const element: HTMLElement | null = getByTestId(container, 'nav-notifications');
-			fireEvent.click(element);
-			await findByTestId(container.parentElement || container, 'jira-notifications', undefined, {
-				timeout: 2000,
-			});
-		},
-	},
-];
-
-const performance = () => {
-	return (
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-		<div style={{ margin: '-1rem 0 0 -1rem', height: '100vh' }}>
-			<ProductExample />
-		</div>
-	);
-};
-
-performance.story = {
-	name: 'Performance',
-
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default performance;

package/__perf__/utils/perf-example.tsx

@@ -1,80 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-
-import { token } from '@atlaskit/tokens';
-
-import { Content, LeftSidebar, Main, PageLayout, TopNavigation } from '../../src';
-
-import JiraIntegrationExample from './product-integration/atlassian-navigation';
-import Sidebar from './product-integration/side-navigation';
-
-const wrapperStyles = css({
-	boxSizing: 'border-box',
-	height: '100%',
-	padding: token('space.100', '8px'),
-	backgroundColor: token('color.background.neutral.subtle'),
-	outlineOffset: -4,
-	overflowY: 'auto',
-});
-
-const Wrapper = ({
-	borderColor,
-	children,
-	noOutline,
-	noHorizontalScrollbar,
-}: {
-	borderColor: string;
-	children: React.ReactNode;
-	noOutline?: boolean;
-	noHorizontalScrollbar?: boolean;
-}) => (
-	<div
-		css={wrapperStyles}
-		style={{
-			outline: noOutline ? 'none' : `2px dashed ${borderColor}`,
-			overflowX: noHorizontalScrollbar ? 'hidden' : 'auto',
-		}}
-	>
-		{children}
-	</div>
-);
-
-const sidebarWrapperStyles = css({
-	height: '100%',
-	// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-	nav: {
-		minWidth: 20,
-		overflowX: 'hidden',
-	},
-});
-
-const slotLabelStyles = css({ textAlign: 'center' });
-
-const BasicGrid = () => {
-	return (
-		<PageLayout>
-			<TopNavigation height={60} isFixed={true}>
-				<JiraIntegrationExample />
-			</TopNavigation>
-			<Content testId="content">
-				<LeftSidebar testId="left-sidebar" isFixed={false} width={450}>
-					<div css={sidebarWrapperStyles}>
-						<Sidebar />
-					</div>
-				</LeftSidebar>
-				<Main>
-					<Wrapper noOutline borderColor={token('color.border')}>
-						<h3 css={slotLabelStyles}>Main</h3>
-					</Wrapper>
-				</Main>
-			</Content>
-		</PageLayout>
-	);
-};
-
-export default BasicGrid;

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

@@ -1,118 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment, type MouseEvent, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-
-// AFP-1799 storybook examples in src cause issues
-import {
-	AtlassianNavigation,
-	PrimaryButton,
-	ProductHome,
-	Search,
-	Settings,
-} from '@atlaskit/atlassian-navigation';
-import Drawer from '@atlaskit/drawer';
-import { JiraIcon, JiraLogo } from '@atlaskit/logo';
-
-import { DefaultCreate } from './create';
-import { HelpPopup } from './help-popup';
-import { NotificationsPopup } from './notifications-popup';
-import { ProfilePopup } from './profile-popup';
-
-const drawerLabelText = {
-	search: 'Search drawer',
-	settings: 'Settings drawer',
-};
-
-const { search, settings } = drawerLabelText;
-
-const ProductHomeExample = () => (
-	<ProductHome icon={JiraIcon} logo={JiraLogo} siteTitle="Extranet" />
-);
-
-const SearchDrawer = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const onClick = () => {
-		setIsOpen(!isOpen);
-	};
-
-	const onClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<Fragment>
-			<Search
-				onClick={onClick}
-				testId="nav-search"
-				placeholder="Search..."
-				tooltip="Search"
-				label="Search"
-			/>
-			<Drawer label={search} isOpen={isOpen} onClose={onClose}>
-				<div>{search}</div>
-			</Drawer>
-		</Fragment>
-	);
-};
-
-const SettingsDrawer = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const onClick = () => {
-		setIsOpen(!isOpen);
-	};
-
-	const onClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<Fragment>
-			<Settings isSelected={isOpen} onClick={onClick} tooltip="Settings" />
-			<Drawer label={settings} isOpen={isOpen} onClose={onClose}>
-				{settings}
-			</Drawer>
-		</Fragment>
-	);
-};
-
-const buttonClick = (toLog: string) => (e: MouseEvent<HTMLElement | HTMLAnchorElement>) => {
-	if (e.ctrlKey || e.metaKey) {
-		return;
-	}
-	e.preventDefault();
-};
-
-const primaryItems = [
-	<PrimaryButton onClick={buttonClick('Projects')}>Projects</PrimaryButton>,
-	<PrimaryButton onClick={buttonClick('Filters')} isHighlighted>
-		Filters
-	</PrimaryButton>,
-	<PrimaryButton onClick={buttonClick('Dashboards')}>Dashboards</PrimaryButton>,
-	<PrimaryButton onClick={buttonClick('Apps')}>Apps</PrimaryButton>,
-];
-
-const PerfExample = () => (
-	<Fragment>
-		<AtlassianNavigation
-			label="site"
-			moreLabel="More"
-			primaryItems={primaryItems}
-			renderCreate={DefaultCreate}
-			renderHelp={HelpPopup}
-			renderNotifications={NotificationsPopup}
-			renderProductHome={ProductHomeExample}
-			renderProfile={ProfilePopup}
-			renderSearch={SearchDrawer}
-			renderSettings={SettingsDrawer}
-		/>
-	</Fragment>
-);
-
-export default PerfExample;

package/__perf__/utils/product-integration/create.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { Create } from '@atlaskit/atlassian-navigation';
-import noop from '@atlaskit/ds-lib/noop';
-import { token } from '@atlaskit/tokens';
-
-const StyledTooltip = () => (
-	<span>
-		Create
-		{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
-		<span style={{ color: token('color.text.accent.orange', 'orange') }}> [c]</span>
-	</span>
-);
-
-export const DefaultCreate = () => (
-	<Create
-		buttonTooltip={<StyledTooltip />}
-		iconButtonTooltip="Create button"
-		onClick={noop}
-		text="Create"
-		testId="create-cta"
-	/>
-);

package/__perf__/utils/product-integration/help-popup.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-
-import { Help } from '@atlaskit/atlassian-navigation';
-import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
-import Popup from '@atlaskit/popup';
-
-const HelpContent = () => (
-	<MenuGroup testId={'nav-help-content'}>
-		<Section title="Help">
-			<ButtonItem>Atlassian Documentation</ButtonItem>
-			<ButtonItem>Atlassian Community</ButtonItem>
-			<ButtonItem>What's New</ButtonItem>
-			<ButtonItem>Get Jira Mobile</ButtonItem>
-			<ButtonItem>Keyboard shortcuts</ButtonItem>
-			<ButtonItem>About Jira</ButtonItem>
-		</Section>
-		<Section title="Legal" hasSeparator>
-			<ButtonItem>Terms of use</ButtonItem>
-			<ButtonItem>Privacy Policy</ButtonItem>
-		</Section>
-	</MenuGroup>
-);
-
-export const HelpPopup = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const onClick = () => {
-		setIsOpen(!isOpen);
-	};
-
-	const onClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<Popup
-			placement="bottom-start"
-			content={HelpContent}
-			isOpen={isOpen}
-			onClose={onClose}
-			trigger={(triggerProps) => (
-				<Help
-					testId={'nav-help'}
-					isSelected={isOpen}
-					onClick={onClick}
-					tooltip="Help"
-					{...triggerProps}
-				/>
-			)}
-		/>
-	);
-};

package/__perf__/utils/product-integration/notifications-popup.tsx

@@ -1,107 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-
-import { Notifications } from '@atlaskit/atlassian-navigation';
-import { Notifications as NotificationsIframe } from '@atlaskit/atlassian-notifications';
-import { NotificationIndicator } from '@atlaskit/notification-indicator';
-import { NotificationLogClient } from '@atlaskit/notification-log-client';
-import Popup from '@atlaskit/popup';
-
-const wrapperStyles = css({
-	display: 'flex',
-	width: 540,
-	height: 'calc(100vh - 200px)',
-	// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-	paddingBlockStart: 18,
-	// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-	paddingInlineStart: 18,
-});
-
-const NotificationsContent = () => (
-	<div css={wrapperStyles}>
-		<NotificationsIframe
-			// _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html?scope=user&product=uchi&locale=en"
-			_url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html"
-			locale="en"
-			product="jira"
-			testId="jira-notifications"
-			title="Notifications"
-		/>
-	</div>
-);
-
-class MockNotificationLogClient extends NotificationLogClient {
-	mockedCount = 0;
-	constructor(mockedCount: number) {
-		super('', '');
-		this.mockedCount = mockedCount;
-	}
-
-	public async countUnseenNotifications() {
-		return Promise.resolve({ count: this.mockedCount });
-	}
-}
-
-const client = new MockNotificationLogClient(5);
-const emptyClient = new MockNotificationLogClient(0);
-
-export const NotificationsPopup = () => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [interacted, setInteracted] = useState(false);
-	const [buttonLabel, setButtonLabel] = useState<number | undefined>();
-
-	const NotificationsBadge = () => (
-		<NotificationIndicator
-			onCountUpdated={updateButtonLabel}
-			// force a zero-count after the drawer has been opened
-			notificationLogProvider={Promise.resolve(interacted ? emptyClient : client)}
-		/>
-	);
-
-	const updateButtonLabel = ({
-		newCount,
-		oldCount,
-		source,
-	}: {
-		newCount: number;
-		oldCount?: number;
-		source?: string;
-	}) => {
-		setButtonLabel(newCount || 0);
-	};
-
-	const onClick = () => {
-		// let the badge icon know to clear its count
-		setInteracted(true);
-		setIsOpen(!isOpen);
-	};
-
-	const onClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<Popup
-			placement="bottom-start"
-			content={NotificationsContent}
-			isOpen={isOpen}
-			onClose={onClose}
-			trigger={(triggerProps) => (
-				<Notifications
-					badge={NotificationsBadge}
-					onClick={onClick}
-					tooltip={`Notifications (${buttonLabel})`}
-					isSelected={isOpen}
-					testId={'nav-notifications'}
-					{...triggerProps}
-				/>
-			)}
-		/>
-	);
-};

package/__perf__/utils/product-integration/profile-popup.tsx

@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-
-import { Profile } from '@atlaskit/atlassian-navigation';
-import noop from '@atlaskit/ds-lib/noop';
-import { ButtonItem, MenuGroup, Section } from '@atlaskit/menu';
-import Popup from '@atlaskit/popup';
-
-export const DefaultProfile = () => (
-	<Profile
-		icon={<img src={avatarUrl} alt="Your profile and settings" />}
-		onClick={noop}
-		tooltip="Your profile and settings"
-	/>
-);
-
-export const avatarUrl =
-	'data:image/png;base64,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';
-
-const ProfileContent = () => (
-	<MenuGroup>
-		<Section>
-			<ButtonItem>Give us feedback</ButtonItem>
-		</Section>
-		<Section title="Jira" hasSeparator>
-			<ButtonItem>Settings</ButtonItem>
-		</Section>
-		<Section title="John Smith" hasSeparator>
-			<ButtonItem>Profile</ButtonItem>
-			<ButtonItem>Account settings</ButtonItem>
-			<ButtonItem>Logout</ButtonItem>
-		</Section>
-	</MenuGroup>
-);
-
-const imgCSS = {
-	borderRadius: '100%',
-	height: 24,
-	width: 24,
-};
-export const ProfilePopup = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const onClick = () => {
-		setIsOpen(!isOpen);
-	};
-
-	const onClose = () => {
-		setIsOpen(false);
-	};
-
-	return (
-		<Popup
-			placement="bottom-start"
-			content={ProfileContent}
-			isOpen={isOpen}
-			onClose={onClose}
-			trigger={(triggerProps) => (
-				<Profile
-					icon={
-						<img
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-							style={imgCSS}
-							src={avatarUrl}
-							alt="Your profile and settings"
-						/>
-					}
-					onClick={onClick}
-					isSelected={isOpen}
-					tooltip="Your profile and settings"
-					{...triggerProps}
-				/>
-			)}
-		/>
-	);
-};

package/__perf__/utils/product-integration/sample-footer.tsx

@@ -1,52 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-
-import { type CustomItemComponentProps } from '@atlaskit/menu';
-import { Footer } from '@atlaskit/side-navigation';
-import { B400, N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-
-const Container = (props: CustomItemComponentProps) => {
-	// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-	return <div {...props} />;
-};
-
-const linkStyles = css({
-	color: token('color.text.subtle', N200),
-	'&:hover': {
-		color: token('color.link', B400),
-		cursor: 'pointer',
-		textDecoration: 'none',
-	},
-});
-
-// This example footer conforms to a design taken from Jira designs found at
-// https://www.figma.com/file/GA22za6unqO2WsBWM0Ddxk/Jira-navigation-3?node-id=124%3A7194
-const ExampleFooter = () => {
-	return (
-		<Footer
-			component={Container}
-			description={
-				<Fragment>
-					<a href="https://www.atlassian.com/company/contact" css={linkStyles}>
-						Give feedback
-					</a>
-					{' ∙ '}
-					<a href="http://www.atlassian.com" css={linkStyles}>
-						Learn more
-					</a>
-				</Fragment>
-			}
-		>
-			You're in a next-gen project
-		</Footer>
-	);
-};
-
-export default ExampleFooter;

package/__perf__/utils/product-integration/sample-header.tsx

@@ -1,29 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-
-import Icon from '@atlaskit/icon';
-import { type CustomItemComponentProps } from '@atlaskit/menu';
-import { Header } from '@atlaskit/side-navigation';
-
-const Container = (props: CustomItemComponentProps) => {
-	// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-	return <div {...props} />;
-};
-
-const ExampleHeader = () => {
-	return (
-		<Header
-			component={Container}
-			description="Next-gen service desk"
-			iconBefore={<Icon label="" size="medium" />}
-		>
-			NXTGen Industries
-		</Header>
-	);
-};
-
-export default ExampleHeader;

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

@@ -1,118 +0,0 @@
-/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20400 */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-
-import DropboxIcon from '@atlaskit/icon/glyph/dropbox';
-import FilterIcon from '@atlaskit/icon/glyph/filter';
-import WorkIcon from '@atlaskit/icon/glyph/folder';
-import CustomerIcon from '@atlaskit/icon/glyph/person';
-import QueueIcon from '@atlaskit/icon/glyph/queues';
-import SettingsIcon from '@atlaskit/icon/glyph/settings';
-import LanguageIcon from '@atlaskit/icon/glyph/world';
-import {
-	ButtonItem,
-	LinkItem,
-	NavigationFooter,
-	NavigationHeader,
-	NestableNavigationContent,
-	NestingItem,
-	Section,
-	SideNavigation,
-} from '@atlaskit/side-navigation';
-
-import SampleFooter from './sample-footer';
-import SampleHeader from './sample-header';
-
-const LanguageSettings = () => {
-	return (
-		<NestingItem iconBefore={<LanguageIcon label="" />} id="3-1" title="Language settings">
-			<ButtonItem>Customize</ButtonItem>
-
-			<NestingItem id="3-1-1" title="German Settings">
-				<ButtonItem>Hallo Welt!</ButtonItem>
-			</NestingItem>
-			<NestingItem id="3-1-2" title="English Settings">
-				<ButtonItem>Hello World!</ButtonItem>
-			</NestingItem>
-		</NestingItem>
-	);
-};
-
-const PerfExample = () => {
-	return (
-		<SideNavigation label="project" testId="side-navigation">
-			<NavigationHeader>
-				<SampleHeader />
-			</NavigationHeader>
-			<NestableNavigationContent initialStack={[]}>
-				<Section>
-					<ButtonItem iconBefore={<WorkIcon label="" />}>Your work</ButtonItem>
-					<LinkItem
-						href="https://www.atlassian.com/customers"
-						iconBefore={<CustomerIcon label="" />}
-					>
-						Your customers
-					</LinkItem>
-					<NestingItem
-						id="1"
-						isSelected
-						title="Queues view"
-						testId="nav-side-queues"
-						iconBefore={<QueueIcon label="" />}
-					>
-						<Section title="Queues">
-							<ButtonItem>Untriaged</ButtonItem>
-							<ButtonItem>My feature work</ButtonItem>
-							<ButtonItem>My bugfix work</ButtonItem>
-							<ButtonItem>Signals</ButtonItem>
-							<ButtonItem>Assigned to me</ButtonItem>
-						</Section>
-						<Section hasSeparator>
-							<ButtonItem>New queue</ButtonItem>
-						</Section>
-					</NestingItem>
-					<NestingItem
-						id="2"
-						testId="filter-nesting-item"
-						title="Filters"
-						iconBefore={<FilterIcon label="" />}
-					>
-						<Section>
-							<ButtonItem>Search issues</ButtonItem>
-						</Section>
-						<Section title="Starred">
-							<ButtonItem>Everything me</ButtonItem>
-							<ButtonItem>My open issues</ButtonItem>
-							<ButtonItem>Reported by me</ButtonItem>
-						</Section>
-						<Section hasSeparator title="Other">
-							<ButtonItem>All issues</ButtonItem>
-							<ButtonItem>Open issues</ButtonItem>
-							<ButtonItem>Created recently</ButtonItem>
-							<ButtonItem>Resolved recently</ButtonItem>
-						</Section>
-						<Section hasSeparator>
-							<ButtonItem>View all filters</ButtonItem>
-						</Section>
-					</NestingItem>
-					<NestingItem id="3" iconBefore={<SettingsIcon label="" />} title="Settings">
-						<LanguageSettings />
-					</NestingItem>
-					<NestingItem id="4" iconBefore={<DropboxIcon label="" />} title="Dropbox" isDisabled>
-						<span />
-					</NestingItem>
-				</Section>
-			</NestableNavigationContent>
-			<NavigationFooter>
-				<SampleFooter />
-			</NavigationFooter>
-		</SideNavigation>
-	);
-};
-
-export default PerfExample;