@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/legacy-var-testing.tsx

@@ -1,173 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { type ChangeEvent, useCallback, useState } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import Heading from '@atlaskit/heading';
-import { ConfluenceIcon } from '@atlaskit/logo';
-import { Aside } from '@atlaskit/navigation-system/layout/aside';
-import { Main } from '@atlaskit/navigation-system/layout/main';
-import { Panel } from '@atlaskit/navigation-system/layout/panel';
-import { PanelSplitter } from '@atlaskit/navigation-system/layout/panel-splitter';
-import { Root } from '@atlaskit/navigation-system/layout/root';
-import { SideNav, SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	TopNav,
-	TopNavEnd,
-	TopNavMiddle,
-	TopNavStart,
-} from '@atlaskit/navigation-system/layout/top-nav';
-import {
-	AppLogo,
-	AppSwitcher,
-	CreateButton,
-	Help,
-	Search,
-	Settings,
-} from '@atlaskit/navigation-system/top-nav-items';
-import { RadioGroup } from '@atlaskit/radio';
-import type { OptionsPropType } from '@atlaskit/radio/types';
-import { token } from '@atlaskit/tokens';
-
-const asideStyles = cssMap({
-	root: { backgroundColor: token('elevation.surface.sunken') },
-	content: {
-		paddingTop: token('space.300'),
-		paddingRight: token('space.300'),
-		paddingBottom: token('space.300'),
-		paddingLeft: token('space.300'),
-		borderInlineStart: `${token('border.width')} solid ${token('color.border')}`,
-		height: '100%',
-		boxSizing: 'border-box',
-	},
-});
-
-const panelStyles = cssMap({
-	content: {
-		paddingTop: token('space.300'),
-		paddingRight: token('space.300'),
-		paddingBottom: token('space.300'),
-		paddingLeft: token('space.300'),
-	},
-});
-
-const legacyVarSpyStyles = cssMap({
-	root: {
-		position: 'fixed',
-		height: 48,
-		left: 0,
-		bottom: 96,
-		backgroundColor: token('color.background.accent.blue.bolder'),
-		zIndex: 999,
-	},
-	leftSidebarWidth: {
-		width: 'var(--leftSidebarWidth)',
-	},
-	rightSidebarWidth: {
-		width: 'var(--rightSidebarWidth)',
-	},
-	rightPanelWidth: {
-		width: 'var(--rightPanelWidth)',
-	},
-});
-
-type LegacyVar = 'leftSidebarWidth' | 'rightSidebarWidth' | 'rightPanelWidth';
-
-function LegacyVarSpy({ legacyVar }: { legacyVar: LegacyVar }) {
-	return (
-		<div
-			data-testid="legacy-var-spy"
-			css={[legacyVarSpyStyles.root, legacyVarSpyStyles[legacyVar]]}
-		/>
-	);
-}
-
-const legacyVarOptions = [
-	{ name: 'legacyVar', value: 'leftSidebarWidth', label: 'SideNav' },
-	{ name: 'legacyVar', value: 'rightSidebarWidth', label: 'Aside' },
-	{ name: 'legacyVar', value: 'rightPanelWidth', label: 'Panel' },
-] as const satisfies OptionsPropType;
-
-export function ResizableSlots() {
-	const [legacyVar, setLegacyVar] = useState<LegacyVar>(legacyVarOptions[0].value);
-
-	const handleResizableSlotChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-		setLegacyVar(event.target.value as LegacyVar);
-	}, []);
-
-	return (
-		<Root UNSAFE_dangerouslyHoistSlotSizes>
-			<TopNav>
-				<TopNavStart>
-					<SideNavToggleButton
-						testId="side-nav-toggle-button"
-						collapseLabel="Collapse sidebar"
-						expandLabel="Expand sidebar"
-					/>
-					<AppSwitcher label="Switch apps" />
-					<AppLogo href="" icon={ConfluenceIcon} name="Confluence" label="Home page" />
-				</TopNavStart>
-				<TopNavMiddle>
-					<Search label="Search" />
-					<CreateButton>Create</CreateButton>
-				</TopNavMiddle>
-				<TopNavEnd>
-					<Help label="Help" />
-					<Settings label="Settings" />
-				</TopNavEnd>
-			</TopNav>
-
-			{legacyVar === 'leftSidebarWidth' && (
-				<SideNav label="Side navigation" defaultWidth={320} id="side-nav" testId="side-nav">
-					<Heading size="small">SideNav</Heading>
-					<PanelSplitter
-						label="Resize sidebar"
-						testId="side-nav-slot-panel-splitter" // testId is used in integration tests
-					/>
-				</SideNav>
-			)}
-
-			<Main id="main-container">
-				<Heading size="small">Main</Heading>
-
-				<RadioGroup
-					options={legacyVarOptions}
-					onChange={handleResizableSlotChange}
-					value={legacyVar}
-				/>
-
-				<LegacyVarSpy legacyVar={legacyVar} />
-			</Main>
-
-			{legacyVar === 'rightSidebarWidth' && (
-				<Aside xcss={asideStyles.root} defaultWidth={400} id="aside">
-					<div css={asideStyles.content}>
-						<Heading size="small">Aside</Heading>
-					</div>
-					<PanelSplitter
-						label="Resize aside"
-						testId="aside-slot-panel-splitter" // testId is used in integration tests
-					/>
-				</Aside>
-			)}
-
-			{legacyVar === 'rightPanelWidth' && (
-				<Panel defaultWidth={350} id="panel" testId="panel">
-					<div css={panelStyles.content}>
-						<Heading size="small">Panel</Heading>
-					</div>
-					<PanelSplitter
-						label="Resize panel"
-						testId="panel-slot-panel-splitter" // testId is used in integration tests
-					/>
-				</Panel>
-			)}
-		</Root>
-	);
-}
-
-export default ResizableSlots;

package/examples/link-menu-item.tsx

@@ -1,383 +0,0 @@
-/**
- * @jsxfrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-
-import Avatar from '@atlaskit/avatar';
-import { IconButton } from '@atlaskit/button/new';
-import { cssMap, jsx } from '@atlaskit/css';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import AddIcon from '@atlaskit/icon/core/add';
-import HomeIcon from '@atlaskit/icon/core/home';
-import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
-import Lozenge from '@atlaskit/lozenge';
-import { MenuList } from '@atlaskit/navigation-system';
-import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	COLLAPSE_ELEM_BEFORE,
-	LinkMenuItem,
-} from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Stack } from '@atlaskit/primitives';
-
-const styles = cssMap({
-	root: {
-		width: '300px',
-	},
-});
-
-const AddAction = ({ shouldRenderToParent }: { shouldRenderToParent: boolean }) => (
-	// eslint-disable-next-line @atlaskit/design-system/use-should-render-to-parent
-	<DropdownMenu
-		shouldRenderToParent={shouldRenderToParent}
-		trigger={({ triggerRef, ...props }) => (
-			<IconButton
-				ref={triggerRef}
-				{...props}
-				spacing="compact"
-				appearance="subtle"
-				label="Add"
-				icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-			/>
-		)}
-	>
-		<DropdownItemGroup>
-			<DropdownItem>Create</DropdownItem>
-			<DropdownItem>Import</DropdownItem>
-		</DropdownItemGroup>
-	</DropdownMenu>
-);
-
-const MoreAction = ({ shouldRenderToParent }: { shouldRenderToParent: boolean }) => (
-	// eslint-disable-next-line @atlaskit/design-system/use-should-render-to-parent
-	<DropdownMenu
-		shouldRenderToParent={shouldRenderToParent}
-		trigger={({ triggerRef, ...props }) => (
-			<IconButton
-				ref={triggerRef}
-				{...props}
-				spacing="compact"
-				appearance="subtle"
-				label="More"
-				icon={(iconProps) => <MoreIcon {...iconProps} size="small" />}
-			/>
-		)}
-	>
-		<DropdownItemGroup>
-			<DropdownItem>Manage starred</DropdownItem>
-			<DropdownItem>Export</DropdownItem>
-		</DropdownItemGroup>
-	</DropdownMenu>
-);
-
-const MockActions = ({ shouldRenderToParent }: { shouldRenderToParent: boolean }) => (
-	<>
-		<AddAction shouldRenderToParent={shouldRenderToParent} />
-		<MoreAction shouldRenderToParent={shouldRenderToParent} />
-	</>
-);
-
-const homeIcon = <HomeIcon label="" color="currentColor" spacing="spacious" />;
-const homeIconButton = (
-	<IconButton icon={HomeIcon} label="IconButton" appearance="subtle" spacing="compact" />
-);
-const elemAfter = <Lozenge>elem after</Lozenge>;
-
-export const LinkMenuItemExample = () => (
-	<div css={styles.root}>
-		<SideNavContent>
-			<MenuList>
-				<LinkMenuItem href="#">Text only</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={COLLAPSE_ELEM_BEFORE}>
-					Text only (collapse elemBefore)
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={homeIcon}>
-					With elemBefore
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={homeIcon}>
-					With elemBefore and long overflowing text
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore="🙂">
-					Emoji as elemBefore
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					description="This is an example of a long description"
-				>
-					With description
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					description="This is an example of a long description"
-					isSelected
-				>
-					Description and selected
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={homeIconButton}>
-					With icon button as elemBefore
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={homeIcon} isSelected>
-					Selected
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					isSelected
-					actions={<MockActions shouldRenderToParent />}
-				>
-					Selected with actions
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={<Avatar />}>
-					With avatar
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={homeIcon} actions={<MockActions shouldRenderToParent />}>
-					With actions
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					actions={<MockActions shouldRenderToParent={false} />}
-				>
-					With actions (portalled popup)
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					actionsOnHover={<MockActions shouldRenderToParent />}
-				>
-					With hover actions
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					actionsOnHover={<MockActions shouldRenderToParent={false} />}
-				>
-					With hover actions (portalled popup)
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					actionsOnHover={<MockActions shouldRenderToParent />}
-				>
-					With hover actions and elemBefore and long text
-				</LinkMenuItem>
-				<LinkMenuItem href="#" elemBefore={homeIcon} elemAfter={elemAfter}>
-					With elemAfter
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					elemAfter={elemAfter}
-					actions={<MockActions shouldRenderToParent />}
-				>
-					With elemAfter and actions
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					elemAfter={elemAfter}
-					actions={<MockActions shouldRenderToParent />}
-				>
-					With elemAfter and actions (portalled popup)
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					actions={<AddAction shouldRenderToParent />}
-					actionsOnHover={<MoreAction shouldRenderToParent />}
-				>
-					With actions and hoverActions
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					actions={<AddAction shouldRenderToParent={false} />}
-					actionsOnHover={<MoreAction shouldRenderToParent={false} />}
-				>
-					With actions and hoverActions (portalled popup)
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					elemAfter={elemAfter}
-					actionsOnHover={<MoreAction shouldRenderToParent />}
-				>
-					With elemAfter and hoverActions
-				</LinkMenuItem>
-				<LinkMenuItem
-					href="#"
-					elemBefore={homeIcon}
-					elemAfter={elemAfter}
-					actionsOnHover={<MoreAction shouldRenderToParent={false} />}
-				>
-					With elemAfter and hoverActions (portalled popup)
-				</LinkMenuItem>
-				<LinkMenuItem
-					description="A long description that should be truncated"
-					href="#"
-					elemBefore={homeIconButton}
-					actions={<AddAction shouldRenderToParent />}
-					elemAfter={elemAfter}
-					actionsOnHover={<MoreAction shouldRenderToParent />}
-				>
-					With all options and long text
-				</LinkMenuItem>
-				<LinkMenuItem
-					description="A long description that should be truncated"
-					href="#"
-					elemBefore={homeIconButton}
-					actions={<AddAction shouldRenderToParent={false} />}
-					elemAfter={elemAfter}
-					actionsOnHover={<MoreAction shouldRenderToParent={false} />}
-				>
-					With all options and long text (portalled popup)
-				</LinkMenuItem>
-			</MenuList>
-		</SideNavContent>
-	</div>
-);
-
-export const LinkMenuItemRTLExample = () => (
-	<div dir="rtl">
-		<LinkMenuItemExample />
-	</div>
-);
-
-export const LinkMenuItemWithElemAfter = () => (
-	<div css={styles.root}>
-		<MenuList>
-			<LinkMenuItem href="#" elemBefore={homeIcon} elemAfter={elemAfter}>
-				With elemAfter
-			</LinkMenuItem>
-		</MenuList>
-	</div>
-);
-
-export const LinkMenuItemWithElemAfterAndActionsOnHover = () => (
-	<div css={styles.root}>
-		<MenuList>
-			<LinkMenuItem
-				href="#"
-				elemBefore={homeIcon}
-				elemAfter={elemAfter}
-				actionsOnHover={<MockActions shouldRenderToParent />}
-			>
-				With elemAfter and actionsOnHover
-			</LinkMenuItem>
-		</MenuList>
-	</div>
-);
-
-export const LinkMenuItemBasic = () => (
-	<div css={styles.root}>
-		<MenuList>
-			<LinkMenuItem href="#" elemBefore={homeIcon}>
-				Basic link menu item
-			</LinkMenuItem>
-		</MenuList>
-	</div>
-);
-
-export const LinkMenuItemSelected = () => (
-	<div css={styles.root}>
-		<MenuList>
-			<LinkMenuItem href="#" isSelected elemBefore={homeIcon}>
-				Selected link menu item
-			</LinkMenuItem>
-		</MenuList>
-	</div>
-);
-
-const ExportAction = ({
-	shouldRenderToParent,
-	defaultOpen,
-}: {
-	shouldRenderToParent?: boolean;
-	defaultOpen?: boolean;
-}) => (
-	// eslint-disable-next-line @atlaskit/design-system/use-should-render-to-parent
-	<DropdownMenu
-		defaultOpen={defaultOpen}
-		shouldRenderToParent={shouldRenderToParent}
-		trigger={({ triggerRef, ...props }) => (
-			<IconButton
-				ref={triggerRef}
-				{...props}
-				spacing="compact"
-				appearance="subtle"
-				label="More"
-				icon={(iconProps) => <MoreIcon {...iconProps} size="small" />}
-			/>
-		)}
-	>
-		<DropdownItemGroup>
-			<DropdownItem>Export</DropdownItem>
-		</DropdownItemGroup>
-	</DropdownMenu>
-);
-
-export const LinkMenuItemWithDropdownActionOpen = ({ isSelected }: { isSelected?: boolean }) => (
-	<div css={styles.root}>
-		<MenuList>
-			<Stack space="space.800">
-				<LinkMenuItem href="#" actions={<ExportAction shouldRenderToParent defaultOpen />}>
-					Dropdown open (actions)
-				</LinkMenuItem>
-
-				<LinkMenuItem
-					href="#"
-					isSelected
-					actions={<ExportAction shouldRenderToParent defaultOpen />}
-				>
-					Selected with dropdown open (actions)
-				</LinkMenuItem>
-
-				<LinkMenuItem href="#" actions={<ExportAction shouldRenderToParent={false} defaultOpen />}>
-					Portalled dropdown open (actions)
-				</LinkMenuItem>
-
-				<LinkMenuItem href="#" actionsOnHover={<ExportAction shouldRenderToParent defaultOpen />}>
-					Dropdown open (actionsOnHover)
-				</LinkMenuItem>
-
-				<LinkMenuItem
-					href="#"
-					actionsOnHover={<ExportAction shouldRenderToParent={false} defaultOpen />}
-				>
-					Portalled dropdown open (actionsOnHover)
-				</LinkMenuItem>
-
-				<LinkMenuItem
-					href="#"
-					elemAfter={<Lozenge>elem after</Lozenge>}
-					actionsOnHover={<ExportAction shouldRenderToParent defaultOpen />}
-				>
-					elemAfter and dropdown open (actionsOnHover)
-				</LinkMenuItem>
-
-				<LinkMenuItem
-					href="#"
-					elemAfter={<Lozenge>elem after</Lozenge>}
-					actionsOnHover={<ExportAction shouldRenderToParent={false} defaultOpen />}
-				>
-					elemAfter and portalled dropdown open (actionsOnHover)
-				</LinkMenuItem>
-			</Stack>
-		</MenuList>
-	</div>
-);
-
-// Combining into one example for atlaskit site
-const Example = () => (
-	<div>
-		<LinkMenuItemExample />
-		<div dir="rtl">RTL</div>
-		<LinkMenuItemRTLExample />
-	</div>
-);
-
-export default Example;

package/examples/main-content-border.tsx

@@ -1,148 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useState } from 'react';
-
-import Button from '@atlaskit/button/new';
-import { cssMap, jsx } from '@atlaskit/css';
-import Heading from '@atlaskit/heading';
-import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
-import InboxIcon from '@atlaskit/icon/core/inbox';
-import ShrinkDiagonalIcon from '@atlaskit/icon/core/shrink-diagonal';
-import {
-	LinkMenuItem,
-	Main,
-	MenuList,
-	Root,
-	Search,
-	SideNav,
-	SideNavContent,
-} from '@atlaskit/navigation-system';
-import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
-import {
-	TopNav,
-	TopNavEnd,
-	TopNavMiddle,
-	TopNavStart,
-} from '@atlaskit/navigation-system/layout/top-nav';
-import {
-	AppSwitcher,
-	CreateButton,
-	Help,
-	Settings,
-} from '@atlaskit/navigation-system/top-nav-items';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Inline, Stack } from '@atlaskit/primitives';
-import { token } from '@atlaskit/tokens';
-
-// TODO: consider exposing this type properly, but it isn't needed for normal usage
-// eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
-import { type CustomTheme } from '../src/ui/top-nav-items/themed/get-custom-theme-styles';
-
-import { WithResponsiveViewport } from './utils/example-utils';
-
-const headingStyles = cssMap({
-	root: {
-		paddingInline: token('space.300'),
-		paddingBlockStart: token('space.300'),
-	},
-});
-
-const customTheme: CustomTheme = { backgroundColor: '#ff8160', highlightColor: '#d8388a' };
-
-function MainContentBorderExample({
-	isCustomThemeEnabled: defaultIsCustomThemeEnabled = true,
-	isSideNavCollapsed: defaultIsSideNavCollapsed = false,
-	defaultIsFullScreen = false,
-}: {
-	isCustomThemeEnabled?: boolean;
-	isSideNavCollapsed?: boolean;
-	defaultIsFullScreen?: boolean;
-}) {
-	const [isCustomThemeEnabled, setIsCustomThemeEnabled] = useState(defaultIsCustomThemeEnabled);
-	const [isFullscreen, setIsFullscreen] = useState(defaultIsFullScreen);
-
-	return (
-		<WithResponsiveViewport>
-			<Root>
-				{!isFullscreen && (
-					<TopNav UNSAFE_theme={isCustomThemeEnabled ? customTheme : undefined}>
-						<TopNavStart>
-							<SideNavToggleButton
-								testId="side-nav-toggle-button"
-								collapseLabel="Collapse sidebar"
-								expandLabel="Expand sidebar"
-							/>
-							<AppSwitcher label="Switch apps" />
-						</TopNavStart>
-						<TopNavMiddle>
-							<Search label="Search" />
-							<CreateButton>Create</CreateButton>
-						</TopNavMiddle>
-						<TopNavEnd>
-							<Help label="Help" />
-							<Settings label="Settings" />
-						</TopNavEnd>
-					</TopNav>
-				)}
-
-				{!isFullscreen && (
-					<SideNav defaultCollapsed={defaultIsSideNavCollapsed}>
-						<SideNavContent>
-							<MenuList>
-								<LinkMenuItem href="#" elemBefore={<InboxIcon label="" color="currentColor" />}>
-									Your work
-								</LinkMenuItem>
-							</MenuList>
-						</SideNavContent>
-					</SideNav>
-				)}
-				<Main>
-					<Stack space="space.100" xcss={headingStyles.root}>
-						<Heading size="small">Project Blueshift</Heading>
-						<Inline space="space.100">
-							<Button
-								isSelected={isCustomThemeEnabled}
-								onClick={() => setIsCustomThemeEnabled((prev) => !prev)}
-							>
-								Toggle custom theme
-							</Button>
-							<Button
-								isSelected={isFullscreen}
-								onClick={() => setIsFullscreen((prev) => !prev)}
-								iconBefore={isFullscreen ? ShrinkDiagonalIcon : GrowDiagonalIcon}
-							>
-								Toggle full screen
-							</Button>
-						</Inline>
-					</Stack>
-				</Main>
-			</Root>
-		</WithResponsiveViewport>
-	);
-}
-
-export function MainContentBorderThemingEnabledVR() {
-	return <MainContentBorderExample isCustomThemeEnabled isSideNavCollapsed={false} />;
-}
-
-export function MainContentBorderThemingDisabledVR() {
-	return <MainContentBorderExample isCustomThemeEnabled={false} isSideNavCollapsed={false} />;
-}
-
-export function MainContentBorderThemingEnabledSideNavCollapsedVR() {
-	return <MainContentBorderExample isCustomThemeEnabled isSideNavCollapsed />;
-}
-
-export function MainContentBorderThemingDisabledSideNavCollapsedVR() {
-	return <MainContentBorderExample isCustomThemeEnabled={false} isSideNavCollapsed />;
-}
-
-export function MainContentBorderThemingEnabledFullScreenVR() {
-	return (
-		<MainContentBorderExample isCustomThemeEnabled isSideNavCollapsed={false} defaultIsFullScreen />
-	);
-}
-
-export default MainContentBorderExample;