@atlaskit/page-layout 3.11.7 → 3.11.8

package/CHANGELOG.md

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

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

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "3.11.7",
+	"version": "3.11.8",
 	"description": "A collection of components which let you compose an application's page layout.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.1.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -69,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",

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,123 +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, DrawerCloseButton, DrawerContent, DrawerSidebar } from '@atlaskit/drawer/compiled';
-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}>
-				<DrawerSidebar>
-					<DrawerCloseButton />
-				</DrawerSidebar>
-				<DrawerContent>
-					<div>{search}</div>
-				</DrawerContent>
-			</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;