@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/flyout-menu-item-async-content.tsx

@@ -1,118 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { useState } from 'react';
-
-import { jsx } from '@compiled/react';
-
-import Button from '@atlaskit/button/new';
-import { cssMap } from '@atlaskit/css';
-import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
-import ClockIcon from '@atlaskit/icon/core/clock';
-import PersonAvatarIcon from '@atlaskit/icon/core/person-avatar';
-import StarredUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
-import { Main } from '@atlaskit/navigation-system/layout/main';
-import { PanelSplitter } from '@atlaskit/navigation-system/layout/panel-splitter';
-import { Root } from '@atlaskit/navigation-system/layout/root';
-import { SideNav, SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { TopNav } from '@atlaskit/navigation-system/layout/top-nav';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemContent,
-	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import { Divider } from '@atlaskit/navigation-system/side-nav-items/menu-section';
-import { Stack } from '@atlaskit/primitives/compiled';
-import Skeleton from '@atlaskit/skeleton';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	root: {
-		paddingBlock: token('space.100'),
-	},
-});
-
-function AsyncContentItems({
-	behavior,
-}: {
-	behavior: 'skeleton-shorter-than-content' | 'skeleton-longer-than-content';
-}) {
-	const [isLoading, setIsLoading] = useState(true);
-
-	if (isLoading) {
-		return (
-			<Stack space="space.200" xcss={styles.root}>
-				<Button onClick={() => setIsLoading(false)}>Load items</Button>
-				{Array.from(
-					{ length: behavior === 'skeleton-shorter-than-content' ? 3 : 30 },
-					(_, index) => (
-						<Skeleton key={index} width="100%" height={16} />
-					),
-				)}
-			</Stack>
-		);
-	}
-
-	return (
-		<MenuList>
-			{Array.from({ length: behavior === 'skeleton-shorter-than-content' ? 30 : 3 }, (_, index) => (
-				<ButtonMenuItem
-					key={index}
-					elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}
-				>
-					Board #{index}
-				</ButtonMenuItem>
-			))}
-			<Divider />
-			<ButtonMenuItem elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}>
-				View all starred items
-			</ButtonMenuItem>
-		</MenuList>
-	);
-}
-
-export default function FlyoutMenuItemAsyncContentExample() {
-	return (
-		<Root>
-			<TopNav>{null}</TopNav>
-
-			<SideNav label="Side navigation">
-				<SideNavContent>
-					<MenuList>
-						<LinkMenuItem href="#" elemBefore={<PersonAvatarIcon label="" color="currentColor" />}>
-							Your work
-						</LinkMenuItem>
-
-						<FlyoutMenuItem>
-							<FlyoutMenuItemTrigger elemBefore={<ClockIcon label="" color="currentColor" />}>
-								Recent
-							</FlyoutMenuItemTrigger>
-							<FlyoutMenuItemContent>
-								<AsyncContentItems behavior="skeleton-shorter-than-content" />
-							</FlyoutMenuItemContent>
-						</FlyoutMenuItem>
-
-						<FlyoutMenuItem>
-							<FlyoutMenuItemTrigger
-								elemBefore={<StarredUnstarredIcon label="" color="currentColor" />}
-							>
-								Starred
-							</FlyoutMenuItemTrigger>
-							<FlyoutMenuItemContent>
-								<AsyncContentItems behavior="skeleton-longer-than-content" />
-							</FlyoutMenuItemContent>
-						</FlyoutMenuItem>
-					</MenuList>
-				</SideNavContent>
-				<PanelSplitter label="Resize sidebar" />
-			</SideNav>
-
-			<Main id="main-container">{null}</Main>
-		</Root>
-	);
-}

package/examples/flyout-menu-item-multiple.tsx

@@ -1,180 +0,0 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
-
-import { bind } from 'bind-event-listener';
-
-import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
-import BoardIcon from '@atlaskit/icon/core/board';
-import ClockIcon from '@atlaskit/icon/core/clock';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
-import { Root } from '@atlaskit/navigation-system/layout/root';
-import { SideNav, SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemContent,
-	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
-import { Divider } from '@atlaskit/navigation-system/side-nav-items/menu-section';
-
-import { WithResponsiveViewport } from './utils/example-utils';
-
-/**
- * Listener callbacks supplied by consumers when registering. They will be called by the manager to
- * open or close the consumer when appropriate.
- */
-type Listeners = {
-	onOpen: () => void;
-	onClose: () => void;
-};
-
-/**
- * Returned by the manager when a consumer registers.
- */
-type Registration = {
-	/**
-	 * Should be called by the consumer when it needs to open.
-	 */
-	open: () => void;
-	/**
-	 * Should be called by the consumer when unmounting to remove the registration.
-	 */
-	cleanup: () => void;
-};
-
-type Manager = {
-	register: (listeners: Listeners) => Registration;
-};
-
-const ManagerContext = createContext<Manager>({
-	register: () => ({
-		open: () => {},
-		cleanup: () => {},
-	}),
-});
-
-function getManager(): Manager {
-	const ledger = new Map<Registration, Listeners>();
-
-	function register(listeners: Listeners): Registration {
-		const registration: Registration = {
-			open() {
-				Array.from(ledger).forEach(([item, callbacks]) => {
-					if (item === registration) {
-						callbacks.onOpen();
-						return;
-					}
-					callbacks.onClose();
-				});
-			},
-			cleanup() {
-				ledger.delete(registration);
-			},
-		};
-
-		ledger.set(registration, listeners);
-
-		return registration;
-	}
-
-	return { register };
-}
-
-function FlyoutWithShortcut({
-	label,
-	shortcutKey,
-	elemBefore,
-	children,
-}: {
-	label: string;
-	shortcutKey: string;
-	elemBefore: React.ReactNode;
-	children: React.ReactNode;
-}) {
-	const [isOpen, setIsOpen] = useState(false);
-	const manager = useContext(ManagerContext);
-
-	useEffect(
-		function mount() {
-			const registration = manager.register({
-				onOpen: () => setIsOpen(true),
-				onClose: () => setIsOpen(false),
-			});
-
-			const cleanupEvents = bind(window, {
-				type: 'keydown',
-				listener: (event: KeyboardEvent) => {
-					if (event.key === shortcutKey) {
-						registration.open();
-					}
-				},
-			});
-
-			return function unmount() {
-				registration.cleanup();
-				cleanupEvents();
-			};
-		},
-		[manager, shortcutKey],
-	);
-
-	const closeFlyout = useCallback(() => setIsOpen(false), []);
-	const toggleFlyout = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	return (
-		<FlyoutMenuItem isOpen={isOpen} onOpenChange={setIsOpen}>
-			<FlyoutMenuItemTrigger elemBefore={elemBefore} onClick={toggleFlyout}>
-				{label}
-			</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent onClose={closeFlyout}>{children}</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-	);
-}
-
-export default function MultipleFlyoutMenuExample() {
-	const [manager] = useState(() => getManager());
-
-	return (
-		<WithResponsiveViewport>
-			<Root>
-				<SideNav>
-					<SideNavContent>
-						<ManagerContext.Provider value={manager}>
-							<FlyoutWithShortcut
-								label="Recent"
-								shortcutKey="r"
-								elemBefore={<ClockIcon label="" color="currentColor" />}
-							>
-								<ButtonMenuItem elemBefore={<BoardIcon label="" color="currentColor" />}>
-									ABC board
-								</ButtonMenuItem>
-								<Divider />
-								<ButtonMenuItem elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}>
-									View all recent items
-								</ButtonMenuItem>
-							</FlyoutWithShortcut>
-
-							<FlyoutWithShortcut
-								label="Starred"
-								shortcutKey="s"
-								elemBefore={<StarUnstarredIcon label="" color="currentColor" />}
-							>
-								<ButtonMenuItem elemBefore={<BoardIcon label="" color="currentColor" />}>
-									YNG board
-								</ButtonMenuItem>
-								<Divider />
-								<ButtonMenuItem elemBefore={<AlignTextLeftIcon label="" color="currentColor" />}>
-									View all starred items
-								</ButtonMenuItem>
-							</FlyoutWithShortcut>
-						</ManagerContext.Provider>
-
-						<ButtonMenuItem elemBefore={<ShowMoreHorizontalIcon label="" color="currentColor" />}>
-							More
-						</ButtonMenuItem>
-					</SideNavContent>
-				</SideNav>
-			</Root>
-		</WithResponsiveViewport>
-	);
-}

package/examples/flyout-menu-item.tsx

@@ -1,269 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useState } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import { IconButton } from '@atlaskit/button/new';
-import AddIcon from '@atlaskit/icon/core/add';
-import ClockIcon from '@atlaskit/icon/core/clock';
-import { ButtonItem } from '@atlaskit/menu';
-import { COLLAPSE_ELEM_BEFORE, MenuList } from '@atlaskit/navigation-system';
-import { ButtonMenuItem } from '@atlaskit/navigation-system/side-nav-items/button-menu-item';
-import {
-	FlyoutMenuItem,
-	FlyoutMenuItemContent,
-	FlyoutMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
-import Popup from '@atlaskit/popup';
-import { Stack } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-const wrapperStyles = cssMap({
-	root: {
-		width: '300px',
-	},
-});
-
-const ExampleWrapper = ({ children }: { children: React.ReactNode }) => (
-	<div css={wrapperStyles.root}>
-		<MenuList>{children}</MenuList>
-	</div>
-);
-
-const FlyoutMenuItemControlled = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	return (
-		<ExampleWrapper>
-			<FlyoutMenuItem isOpen={isOpen}>
-				<FlyoutMenuItemTrigger onClick={() => setIsOpen(!isOpen)}>
-					Flyout Menu Item (controlled)
-				</FlyoutMenuItemTrigger>
-				<FlyoutMenuItemContent onClose={() => setIsOpen(false)}>
-					<MenuList>
-						<ButtonMenuItem>Menu Button 1</ButtonMenuItem>
-						<ButtonMenuItem>Menu Button 2</ButtonMenuItem>
-					</MenuList>
-				</FlyoutMenuItemContent>
-			</FlyoutMenuItem>
-		</ExampleWrapper>
-	);
-};
-
-export const FlyoutMenuItemExample = () => (
-	<ExampleWrapper>
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger>Flyout Menu Item</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent>
-				<MenuList>
-					<ButtonMenuItem>Menu Button 1</ButtonMenuItem>
-					<ButtonMenuItem>Menu Button 2</ButtonMenuItem>
-				</MenuList>
-			</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger
-				elemBefore={<ClockIcon label="" spacing="spacious" color={token('color.icon')} />}
-			>
-				Flyout Menu Item with icon and long text
-			</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent>
-				<MenuList>
-					<ButtonMenuItem>Button Menu Item 1</ButtonMenuItem>
-					<ButtonMenuItem>Button Menu Item 2</ButtonMenuItem>
-				</MenuList>
-			</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger elemBefore="🙂">Flyout with emoji</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent>
-				<MenuList>
-					<ButtonMenuItem>Button Menu Item 1</ButtonMenuItem>
-					<ButtonMenuItem>Button Menu Item 2</ButtonMenuItem>
-				</MenuList>
-			</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger isSelected>Flyout Menu Item - selected</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent>
-				<MenuList>
-					<ButtonMenuItem>Menu Button 1</ButtonMenuItem>
-					<ButtonMenuItem>Menu Button 2</ButtonMenuItem>
-				</MenuList>
-			</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>
-				Flyout with collapsed elemBefore
-			</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent>
-				<MenuList>
-					<ButtonMenuItem>Menu Button 1</ButtonMenuItem>
-					<ButtonMenuItem>Menu Button 2</ButtonMenuItem>
-				</MenuList>
-			</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-	</ExampleWrapper>
-);
-
-export const FlyoutMenuItemDefaultOpenExample = ({ isSelected }: { isSelected?: boolean }) => (
-	<ExampleWrapper>
-		<FlyoutMenuItem isDefaultOpen>
-			<FlyoutMenuItemTrigger
-				elemBefore={<ClockIcon label="" spacing="spacious" color={token('color.icon')} />}
-				isSelected={isSelected}
-			>
-				Flyout Menu Item
-			</FlyoutMenuItemTrigger>
-			<FlyoutMenuItemContent>
-				<MenuList>
-					<ButtonMenuItem>Button Menu Item 1</ButtonMenuItem>
-					<ButtonMenuItem
-						actions={
-							<IconButton
-								key="add"
-								label="Add"
-								icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-								appearance="subtle"
-								spacing="compact"
-							/>
-						}
-					>
-						Button Menu Item 2
-					</ButtonMenuItem>
-				</MenuList>
-			</FlyoutMenuItemContent>
-		</FlyoutMenuItem>
-	</ExampleWrapper>
-);
-
-export const FlyoutMenuItemDefaultOpenSelectedVR = () => (
-	<FlyoutMenuItemDefaultOpenExample isSelected />
-);
-
-export const FlyoutMenuItemWithNestedPopupExample = ({
-	isDefaultOpen = false,
-}: {
-	isDefaultOpen?: boolean;
-}) => {
-	const [isNestedPopupOpen, setIsNestedPopupOpen] = useState(isDefaultOpen);
-
-	return (
-		<ExampleWrapper>
-			<FlyoutMenuItem
-				onOpenChange={(open) => {
-					if (!open) {
-						setIsNestedPopupOpen(false);
-					}
-				}}
-				isDefaultOpen={isDefaultOpen}
-			>
-				<FlyoutMenuItemTrigger>Flyout with nested popup</FlyoutMenuItemTrigger>
-				<FlyoutMenuItemContent>
-					<MenuList>
-						<ButtonMenuItem
-							actions={
-								<Popup
-									shouldRenderToParent
-									isOpen={isNestedPopupOpen}
-									onClose={() => setIsNestedPopupOpen(false)}
-									placement="right-start"
-									content={() => (
-										<div>
-											<ButtonItem>Menu button 1</ButtonItem>
-											<ButtonItem>Menu button 2</ButtonItem>
-											<ButtonItem>Menu button 3</ButtonItem>
-										</div>
-									)}
-									trigger={(triggerProps) => (
-										<IconButton
-											{...triggerProps}
-											icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-											label="Add"
-											appearance="subtle"
-											spacing="compact"
-											onClick={() => setIsNestedPopupOpen(!isNestedPopupOpen)}
-											isSelected={isNestedPopupOpen}
-										/>
-									)}
-								/>
-							}
-						>
-							With a popup
-						</ButtonMenuItem>
-						<ButtonMenuItem>Menu Item 2</ButtonMenuItem>
-					</MenuList>
-				</FlyoutMenuItemContent>
-			</FlyoutMenuItem>
-		</ExampleWrapper>
-	);
-};
-
-export const FlyoutMenuItemWithNestedPopupDefaultOpenExample = () => (
-	<FlyoutMenuItemWithNestedPopupExample isDefaultOpen />
-);
-
-export const FlyoutMenuItemRTL = () => (
-	<div dir="rtl">
-		<FlyoutMenuItemExample />
-	</div>
-);
-
-export const FlyoutMenuItemDefaultOpenRTL = () => (
-	<div dir="rtl">
-		<FlyoutMenuItemDefaultOpenExample />
-	</div>
-);
-
-export const FlyoutMenuItemTriggerBasic = () => (
-	<ExampleWrapper>
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger>Flyout menu item</FlyoutMenuItemTrigger>
-		</FlyoutMenuItem>
-	</ExampleWrapper>
-);
-
-export const FlyoutMenuItemTriggerSelected = () => (
-	<ExampleWrapper>
-		<FlyoutMenuItem>
-			<FlyoutMenuItemTrigger isSelected>Flyout menu item</FlyoutMenuItemTrigger>
-		</FlyoutMenuItem>
-	</ExampleWrapper>
-);
-
-// Combining into one example for atlaskit site
-const Example = () => (
-	<Stack space="space.200">
-		<div>
-			Default
-			<FlyoutMenuItemExample />
-		</div>
-
-		<div>
-			Default open
-			<FlyoutMenuItemDefaultOpenExample />
-		</div>
-
-		<div>
-			With nested popup
-			<FlyoutMenuItemWithNestedPopupExample />
-		</div>
-
-		<div>
-			<div dir="rtl">RTL</div>
-			<FlyoutMenuItemRTL />
-		</div>
-
-		<FlyoutMenuItemControlled />
-	</Stack>
-);
-
-export default Example;