@atlaskit/page-layout 3.3.2 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/page-layout
 
+## 3.4.0
+
+### Minor Changes
+
+- [#110836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110836)
+  [`a8bd419fd70b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8bd419fd70b9) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.2
 
 ### Patch Changes
@@ -24,7 +43,7 @@
 
 - [#100748](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100748)
   [`ff76f4c7a63d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ff76f4c7a63d) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 3.2.2
 

package/README.md

@@ -10,7 +10,10 @@ yarn add @atlaskit/page-layout
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlassian.design/components/page-layout/).
+Detailed docs and example usage can be found
+[here](https://atlassian.design/components/page-layout/).
 
-To add side navigation, use [@atlaskit/side-navigation](https://atlassian.design/components/side-navigation/)
-To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation/)
+To add side navigation, use
+[@atlaskit/side-navigation](https://atlassian.design/components/side-navigation/) To add top/global
+navigation, use
+[@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation/)

package/__perf__/examples.tsx

@@ -1,89 +1,65 @@
 import React from 'react';
 
-import {
-  findByTestId,
-  findByText,
-  fireEvent,
-  getByTestId,
-} from '@testing-library/dom'; // eslint-disable-line import/no-extraneous-dependencies
+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 { 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',
+	{
+		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-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-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,
-        },
-      );
-    },
-  },
+		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>
-  );
+	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',
+	name: 'Performance',
 
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default performance;

package/__perf__/utils/perf-example.tsx

@@ -1,82 +1,80 @@
+/**
+ * @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 { 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',
+	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,
+	children,
+	noOutline,
+	noHorizontalScrollbar,
 }: {
-  borderColor: string;
-  children: React.ReactNode;
-  noOutline?: boolean;
-  noHorizontalScrollbar?: boolean;
+	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>
+	<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
-  nav: {
-    minWidth: 20,
-    overflowX: 'hidden',
-  },
+	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>
-  );
+	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,15 +1,19 @@
+/**
+ * @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,
+	AtlassianNavigation,
+	PrimaryButton,
+	ProductHome,
+	Search,
+	Settings,
 } from '@atlaskit/atlassian-navigation';
 import Drawer from '@atlaskit/drawer';
 import { JiraIcon, JiraLogo } from '@atlaskit/logo';
@@ -20,96 +24,95 @@ import { NotificationsPopup } from './notifications-popup';
 import { ProfilePopup } from './profile-popup';
 
 const drawerLabelText = {
-  search: 'Search drawer',
-  settings: 'Settings drawer',
+	search: 'Search drawer',
+	settings: 'Settings drawer',
 };
 
 const { search, settings } = drawerLabelText;
 
 const ProductHomeExample = () => (
-  <ProductHome icon={JiraIcon} logo={JiraLogo} siteTitle="Extranet" />
+	<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 [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 [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 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>,
+	<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>
+	<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

@@ -5,22 +5,19 @@ 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>
+	<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"
-  />
+	<Create
+		buttonTooltip={<StyledTooltip />}
+		iconButtonTooltip="Create button"
+		onClick={noop}
+		text="Create"
+		testId="create-cta"
+	/>
 );

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

@@ -5,48 +5,48 @@ 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>
+	<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 [isOpen, setIsOpen] = useState(false);
 
-  const onClick = () => {
-    setIsOpen(!isOpen);
-  };
+	const onClick = () => {
+		setIsOpen(!isOpen);
+	};
 
-  const onClose = () => {
-    setIsOpen(false);
-  };
+	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}
-        />
-      )}
-    />
-  );
+	return (
+		<Popup
+			placement="bottom-start"
+			content={HelpContent}
+			isOpen={isOpen}
+			onClose={onClose}
+			trigger={(triggerProps) => (
+				<Help
+					testId={'nav-help'}
+					isSelected={isOpen}
+					onClick={onClick}
+					tooltip="Help"
+					{...triggerProps}
+				/>
+			)}
+		/>
+	);
 };