@atlaskit/navigation-system 0.182.0 → 1.0.0

package/examples/drag-and-drop/jira/projects/project.tsx

@@ -1,257 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { type Ref, useContext, useEffect, useRef, useState } from 'react';
-
-import { css } from '@compiled/react';
-import invariant from 'tiny-invariant';
-
-import { IconButton } from '@atlaskit/button/new';
-import { jsx } from '@atlaskit/css';
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import SettingsIcon from '@atlaskit/icon/core/settings';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
-import TagIcon from '@atlaskit/icon/core/tag';
-import { GroupDropIndicator } from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/group-drop-indicator';
-import { useMenuItemDragAndDrop } from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/use-menu-item-drag-and-drop';
-import { LinkMenuItem } from '@atlaskit/navigation-system/side-nav-items/link-menu-item';
-import { MenuList } from '@atlaskit/navigation-system/side-nav-items/menu-list';
-import {
-	MenuSection,
-	MenuSectionHeading,
-} from '@atlaskit/navigation-system/side-nav-items/menu-section';
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-
-import { getProjectData, isProjectData, type TProject } from '../data';
-import { RegistryContext } from '../registry';
-import { ReorderActionMenu } from '../reorder-actions';
-import { useDispatch } from '../state-context';
-
-const capitalize = css({ textTransform: 'capitalize' });
-
-export function ProjectGroup({
-	name,
-	projects,
-}: {
-	name: 'starred' | 'recent';
-	projects: TProject[];
-}) {
-	const ref = useRef<HTMLDivElement | null>(null);
-	const [state, setState] = useState<'idle' | 'is-over'>();
-
-	useEffect(() => {
-		const element = ref.current;
-
-		// might have no projects
-		if (!element) {
-			return;
-		}
-
-		return dropTargetForElements({
-			element,
-			canDrop: ({ source }) => {
-				const data = source.data;
-				if (!isProjectData(data)) {
-					return false;
-				}
-				// only allowing projects to be dropped in the same group
-				return Boolean(projects.find((project) => project.id === data.id));
-			},
-			onDragStart() {
-				setState('is-over');
-			},
-			onDragEnter() {
-				setState('is-over');
-			},
-			onDragLeave() {
-				setState('idle');
-			},
-			onDrop() {
-				setState('idle');
-			},
-		});
-	});
-
-	if (!projects.length) {
-		return null;
-	}
-
-	return (
-		<GroupDropIndicator isActive={state === 'is-over'} ref={ref} testId={`project-group-${name}`}>
-			<MenuSection isMenuListItem>
-				<MenuSectionHeading>
-					<span css={capitalize}>{name}</span>
-				</MenuSectionHeading>
-				<MenuList>
-					{projects.map((project, index) => (
-						<Project
-							project={project}
-							key={project.id}
-							group={projects}
-							groupName={name}
-							indexInGroup={index}
-						/>
-					))}
-				</MenuList>
-			</MenuSection>
-		</GroupDropIndicator>
-	);
-}
-
-function MoreMenu({
-	project,
-	amountInGroup,
-	groupName,
-	indexInGroup,
-}: {
-	project: TProject;
-	indexInGroup: number;
-	amountInGroup: number;
-	groupName: 'starred' | 'recent';
-}) {
-	const dispatch = useDispatch();
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-
-	return (
-		<DropdownMenu
-			shouldRenderToParent
-			isOpen={isOpen}
-			onOpenChange={() => setIsOpen((current) => !current)}
-			trigger={({ triggerRef, ...triggerProps }) => (
-				<IconButton
-					ref={triggerRef as Ref<HTMLButtonElement>}
-					label="More actions"
-					icon={(iconProps) => <ShowMoreHorizontalIcon {...iconProps} size="small" />}
-					spacing="compact"
-					appearance="subtle"
-					{...triggerProps}
-				/>
-			)}
-		>
-			<DropdownItemGroup hasSeparator>
-				<DropdownItem elemBefore={<SettingsIcon label="" />}>Board settings</DropdownItem>
-				<DropdownItem elemBefore={<TagIcon label="" />}>Add label</DropdownItem>
-			</DropdownItemGroup>
-			<DropdownItemGroup hasSeparator>
-				<ReorderActionMenu
-					label="Reorder project"
-					index={indexInGroup}
-					listSize={amountInGroup}
-					onMoveToTop={() => {
-						dispatch({
-							type: 'reorder-project',
-							trigger: 'keyboard',
-							draggingId: project.id,
-							groupName,
-							startIndex: indexInGroup,
-							finishIndex: 0,
-						});
-						setIsOpen(false);
-					}}
-					onMoveUp={() => {
-						dispatch({
-							type: 'reorder-project',
-							trigger: 'keyboard',
-							draggingId: project.id,
-							groupName,
-							startIndex: indexInGroup,
-							finishIndex: indexInGroup - 1,
-						});
-						setIsOpen(false);
-					}}
-					onMoveDown={() => {
-						dispatch({
-							type: 'reorder-project',
-							trigger: 'keyboard',
-							draggingId: project.id,
-							groupName,
-							startIndex: indexInGroup,
-							finishIndex: indexInGroup + 1,
-						});
-						setIsOpen(false);
-					}}
-					onMoveToBottom={() => {
-						dispatch({
-							type: 'reorder-project',
-							trigger: 'keyboard',
-							draggingId: project.id,
-							groupName,
-							startIndex: indexInGroup,
-							finishIndex: amountInGroup - 1,
-						});
-						setIsOpen(false);
-					}}
-				/>
-			</DropdownItemGroup>
-		</DropdownMenu>
-	);
-}
-function Project({
-	project,
-	group,
-	groupName,
-	indexInGroup,
-}: {
-	project: TProject;
-	group: TProject[];
-	groupName: 'recent' | 'starred';
-	indexInGroup: number;
-}) {
-	const { state, draggableAnchorRef, dragPreview, dropTargetRef, dropIndicator } =
-		useMenuItemDragAndDrop({
-			draggable: {
-				getInitialData: () => getProjectData({ project, groupName }),
-				getDragPreviewPieces: () => ({
-					elemBefore: project.icon,
-					content: project.name,
-				}),
-			},
-			dropTarget: {
-				getData: () => getProjectData({ project, groupName }),
-				getOperations: () => ({
-					'reorder-after': 'available',
-					'reorder-before': 'available',
-				}),
-				canDrop: ({ source }) => {
-					const data = source.data;
-					// Only allowing projects to be dropped in the same group
-					return isProjectData(data) && data.groupName === groupName;
-				},
-			},
-		});
-
-	// register element
-	const registry = useContext(RegistryContext);
-	useEffect(() => {
-		const element = draggableAnchorRef.current;
-		invariant(element);
-		registry?.registerProject({ projectId: project.id, element });
-	}, [registry, draggableAnchorRef, project.id]);
-
-	return (
-		<>
-			<LinkMenuItem
-				href={project.href}
-				elemBefore={project.icon}
-				ref={draggableAnchorRef}
-				isDragging={state.type === 'dragging'}
-				hasDragIndicator
-				dropIndicator={dropIndicator}
-				visualContentRef={dropTargetRef}
-				actionsOnHover={
-					<MoreMenu
-						project={project}
-						groupName={groupName}
-						indexInGroup={indexInGroup}
-						amountInGroup={group.length}
-					/>
-				}
-			>
-				{project.name}
-			</LinkMenuItem>
-			{dragPreview}
-		</>
-	);
-}

package/examples/drag-and-drop/jira/projects/projects-menu-item.tsx

@@ -1,120 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useContext, useEffect, useRef, useState } from 'react';
-
-import invariant from 'tiny-invariant';
-
-import { IconButton } from '@atlaskit/button/new';
-import { jsx } from '@atlaskit/css';
-import AddIcon from '@atlaskit/icon/core/add';
-import ProjectIcon from '@atlaskit/icon/core/project';
-import { useMenuItemDragAndDrop } from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/use-menu-item-drag-and-drop';
-import {
-	ExpandableMenuItem,
-	ExpandableMenuItemContent,
-	ExpandableMenuItemTrigger,
-} from '@atlaskit/navigation-system/side-nav-items/expandable-menu-item';
-
-import { getTopLevelItemData, isTopLevelItemData, type TProject } from '../data';
-import { RegistryContext } from '../registry';
-import { TopLevelSharedMoreMenu } from '../top-level-shared-more-menu';
-
-import { ProjectGroup } from './project';
-
-export function ProjectsMenuItem({
-	projects,
-	index,
-	amountOfMenuItems,
-}: {
-	projects: { starred: TProject[]; recent: TProject[] };
-	index: number;
-	amountOfMenuItems: number;
-}) {
-	const [isExpanded, setIsExpanded] = useState<boolean>(true);
-	const wasExpandedWhenDragStartedRef = useRef<boolean | null>(null);
-	const { state, draggableButtonRef, dragPreview, dropTargetRef, dropIndicator } =
-		useMenuItemDragAndDrop({
-			draggable: {
-				getInitialData: () => getTopLevelItemData('projects'),
-				getDragPreviewPieces: () => ({
-					elemBefore: <ProjectIcon label="" color="currentColor" />,
-					content: 'Projects',
-				}),
-			},
-			dropTarget: {
-				getData: () => getTopLevelItemData('projects'),
-				getOperations: () => ({
-					'reorder-after': 'available',
-					'reorder-before': 'available',
-				}),
-				canDrop: ({ source }) => isTopLevelItemData(source.data),
-			},
-		});
-
-	useEffect(() => {
-		if (state.type === 'dragging') {
-			setIsExpanded((current) => {
-				// capture current state
-				wasExpandedWhenDragStartedRef.current = current;
-				// close when drag is starting
-				return false;
-			});
-		}
-
-		if (state.type === 'idle' && typeof wasExpandedWhenDragStartedRef.current === 'boolean') {
-			setIsExpanded(wasExpandedWhenDragStartedRef.current);
-			wasExpandedWhenDragStartedRef.current = null;
-		}
-	}, [state.type]);
-
-	// register element
-	const registry = useContext(RegistryContext);
-	useEffect(() => {
-		const element = draggableButtonRef.current;
-		invariant(element);
-		registry?.registerTopLevelItem({ item: 'projects', element });
-	}, [registry, draggableButtonRef]);
-
-	return (
-		<>
-			<ExpandableMenuItem
-				isExpanded={isExpanded}
-				onExpansionToggle={() => setIsExpanded((value) => !value)}
-				ref={dropTargetRef}
-				dropIndicator={dropIndicator}
-			>
-				<ExpandableMenuItemTrigger
-					ref={draggableButtonRef}
-					isDragging={state.type === 'dragging'}
-					hasDragIndicator
-					elemBefore={<ProjectIcon label="" color="currentColor" />}
-					actionsOnHover={
-						<>
-							<IconButton
-								label="Add"
-								icon={(iconProps) => <AddIcon {...iconProps} size="small" />}
-								appearance="subtle"
-								spacing="compact"
-							/>
-							<TopLevelSharedMoreMenu
-								index={index}
-								amountOfMenuItems={amountOfMenuItems}
-								value="projects"
-							/>
-						</>
-					}
-				>
-					Projects
-				</ExpandableMenuItemTrigger>
-				<ExpandableMenuItemContent>
-					<ProjectGroup name="starred" projects={projects.starred} />
-					<ProjectGroup name="recent" projects={projects.recent} />
-				</ExpandableMenuItemContent>
-			</ExpandableMenuItem>
-			{dragPreview}
-		</>
-	);
-}

package/examples/drag-and-drop/jira/recent/recent-menu-item.tsx

@@ -1,30 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { jsx } from '@compiled/react';
-
-import ClockIcon from '@atlaskit/icon/core/clock';
-
-import { SharedTopLevelFlyout } from '../shared-top-level-flyout';
-
-export function RecentMenuItem({
-	index,
-	amountOfMenuItems,
-}: {
-	index: number;
-	amountOfMenuItems: number;
-}) {
-	return (
-		<SharedTopLevelFlyout
-			label="Recent"
-			value="recent"
-			testId="recent-menu-item"
-			icon={<ClockIcon label="" />}
-			index={index}
-			amountOfMenuItems={amountOfMenuItems}
-		/>
-	);
-}

package/examples/drag-and-drop/jira/reducer.tsx

@@ -1,78 +0,0 @@
-import { reorder } from '@atlaskit/pragmatic-drag-and-drop/reorder';
-
-import type { TAction, TData, TFilter } from './data';
-import { find, tree } from './filters/filter-tree-utils';
-
-function filterReduce(
-	filters: TFilter[],
-	action: Extract<TAction, { type: 'filter-move' }>,
-): TFilter[] {
-	const { operation, draggingId, targetId } = action;
-
-	const dragging = find(filters, draggingId);
-
-	if (!dragging) {
-		return filters;
-	}
-
-	if (operation === 'reorder-before') {
-		return tree(filters).remove(draggingId).insertBefore({ insert: dragging, targetId }).build();
-	}
-
-	if (operation === 'reorder-after') {
-		return tree(filters).remove(draggingId).insertAfter({ insert: dragging, targetId }).build();
-	}
-
-	if (operation === 'combine') {
-		return tree(filters).remove(draggingId).insertChild({ insert: dragging, targetId }).build();
-	}
-
-	return filters;
-}
-
-export function reduce(current: TData, action: TAction): TData {
-	// Note: currently not sanity checking the actions that are passed
-	// to this reducer for simplicity.
-
-	if (action.type === 'top-level-menu-reorder') {
-		const topLevelItems = reorder({
-			list: current.topLevelItems,
-			startIndex: action.startIndex,
-			finishIndex: action.finishIndex,
-		});
-		const value: TData = {
-			...current,
-			topLevelItems,
-			lastAction: action,
-		};
-		return value;
-	}
-
-	if (action.type === 'reorder-project') {
-		const updated = reorder({
-			list: current.projects[action.groupName],
-			startIndex: action.startIndex,
-			finishIndex: action.finishIndex,
-		});
-
-		return {
-			...current,
-			projects: {
-				...current.projects,
-				[action.groupName]: updated,
-			},
-			lastAction: action,
-		};
-	}
-
-	if (action.type === 'filter-move') {
-		const updated = filterReduce(current.filters, action);
-		return {
-			...current,
-			filters: updated,
-			lastAction: action,
-		};
-	}
-
-	return current;
-}

package/examples/drag-and-drop/jira/registry.tsx

@@ -1,52 +0,0 @@
-import { createContext } from 'react';
-
-import { type TTopLevelItem } from './data';
-
-export function createRegistry() {
-	const projectRegistry = new Map<string, HTMLElement>();
-	const filterRegistry = new Map<string, HTMLElement>();
-
-	function registerProject({ projectId, element }: { projectId: string; element: HTMLElement }) {
-		projectRegistry.set(projectId, element);
-		return function cleanup() {
-			projectRegistry.delete(projectId);
-		};
-	}
-
-	function registerFilter({ filterId, element }: { filterId: string; element: HTMLElement }) {
-		filterRegistry.set(filterId, element);
-		return function cleanup() {
-			filterRegistry.delete(filterId);
-		};
-	}
-
-	function registerTopLevelItem({ item, element }: { item: TTopLevelItem; element: HTMLElement }) {
-		filterRegistry.set(item, element);
-		return function cleanup() {
-			filterRegistry.delete(item);
-		};
-	}
-
-	function getElementForProject(projectId: string): HTMLElement | null {
-		return projectRegistry.get(projectId) ?? null;
-	}
-
-	function getElementForFilter(filterId: string): HTMLElement | null {
-		return filterRegistry.get(filterId) ?? null;
-	}
-
-	function getElementForTopLevelItem(item: TTopLevelItem): HTMLElement | null {
-		return filterRegistry.get(item) ?? null;
-	}
-
-	return {
-		registerFilter,
-		registerProject,
-		registerTopLevelItem,
-		getElementForFilter,
-		getElementForProject,
-		getElementForTopLevelItem,
-	};
-}
-
-export const RegistryContext = createContext<ReturnType<typeof createRegistry> | null>(null);

package/examples/drag-and-drop/jira/reorder-actions.tsx

@@ -1,75 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import GrowVerticalIcon from '@atlaskit/icon/core/grow-vertical';
-import { token } from '@atlaskit/tokens';
-
-type TListMembership = 'first' | 'last' | 'only' | 'standard';
-
-function getType({ index, listSize }: { index: number; listSize: number }): TListMembership {
-	if (listSize <= 1) {
-		return 'only';
-	}
-	if (index === 0) {
-		return 'first';
-	}
-	if (index === listSize - 1) {
-		return 'last';
-	}
-	return 'standard';
-}
-
-export function ReorderActionMenu({
-	index,
-	listSize,
-	onMoveToTop,
-	onMoveUp,
-	onMoveDown,
-	onMoveToBottom,
-	label,
-}: {
-	index: number;
-	listSize: number;
-	onMoveToTop: () => void;
-	onMoveUp: () => void;
-	onMoveDown: () => void;
-	onMoveToBottom: () => void;
-	label: ReactNode;
-}) {
-	const type = getType({ index, listSize });
-
-	return (
-		<DropdownMenu
-			shouldRenderToParent
-			placement="right-start"
-			trigger={({ triggerRef, ...triggerProps }) => (
-				<DropdownItem
-					{...triggerProps}
-					ref={triggerRef}
-					elemBefore={<GrowVerticalIcon label="" />}
-					elemAfter={<ChevronRightIcon color={token('color.icon.subtle')} label="" size="small" />}
-					// No movement operations available when there is only one item
-					isDisabled={type === 'only'}
-				>
-					<span>{label}</span>
-				</DropdownItem>
-			)}
-		>
-			<DropdownItemGroup>
-				<DropdownItem isDisabled={type === 'first'} onClick={() => onMoveToTop()}>
-					Move to top
-				</DropdownItem>
-				<DropdownItem isDisabled={type === 'first'} onClick={() => onMoveUp()}>
-					Move up
-				</DropdownItem>
-				<DropdownItem isDisabled={type === 'last'} onClick={() => onMoveDown()}>
-					Move down
-				</DropdownItem>
-				<DropdownItem isDisabled={type === 'last'} onClick={() => onMoveToBottom()}>
-					Move to bottom
-				</DropdownItem>
-			</DropdownItemGroup>
-		</DropdownMenu>
-	);
-}