@atlaskit/navigation-system 0.166.0

package/examples/drag-and-drop/jira/shared-top-level-flyout.tsx

@@ -0,0 +1,144 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { type ReactNode, useContext, useEffect, useState } from 'react';
+
+import { jsx } from '@compiled/react';
+import invariant from 'tiny-invariant';
+
+import { MenuList } from '@atlaskit/navigation-system';
+import { useMenuItemDragAndDrop } from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/use-menu-item-drag-and-drop';
+import {
+	FlyoutMenuItem,
+	FlyoutMenuItemContent,
+	FlyoutMenuItemTrigger,
+} from '@atlaskit/navigation-system/side-nav-items/flyout-menu-item';
+
+import { getTopLevelItemData, isTopLevelItemData, type TTopLevelItem } from './data';
+import { RegistryContext } from './registry';
+import { ReorderActionMenu } from './reorder-actions';
+import { useDispatch } from './state-context';
+
+// A shared top level menu item flyout implementation to avoid
+// duplicating this shared code
+export function SharedTopLevelFlyout({
+	value,
+	label,
+	icon,
+	index,
+	amountOfMenuItems,
+	testId,
+}: {
+	value: TTopLevelItem;
+	label: string;
+	icon: ReactNode;
+	index: number;
+	amountOfMenuItems: number;
+	testId?: string;
+}) {
+	const { state, draggableButtonRef, dragPreview, dropTargetRef, dropIndicator } =
+		useMenuItemDragAndDrop({
+			draggable: {
+				getInitialData: () => getTopLevelItemData(value),
+				getDragPreviewPieces: () => ({
+					elemBefore: icon,
+					content: label,
+				}),
+			},
+			dropTarget: {
+				getData: () => getTopLevelItemData(value),
+				getOperations: () => ({
+					'reorder-after': 'available',
+					'reorder-before': 'available',
+				}),
+				canDrop: ({ source }) => isTopLevelItemData(source.data),
+			},
+		});
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const dispatch = useDispatch();
+
+	// Close flyout if dragging
+	useEffect(() => {
+		if (state.type === 'dragging') {
+			setIsOpen(false);
+		}
+	}, [state.type, isOpen, setIsOpen]);
+
+	const registry = useContext(RegistryContext);
+	useEffect(() => {
+		const element = draggableButtonRef.current;
+		invariant(element);
+		return registry?.registerTopLevelItem({ item: value, element });
+	}, [draggableButtonRef, registry, value]);
+
+	return (
+		<>
+			<FlyoutMenuItem isOpen={isOpen}>
+				<FlyoutMenuItemTrigger
+					elemBefore={icon}
+					ref={draggableButtonRef}
+					onClick={() => setIsOpen((current) => !current)}
+					isDragging={state.type === 'dragging'}
+					hasDragIndicator
+					dropIndicator={dropIndicator}
+					visualContentRef={dropTargetRef}
+					testId={testId}
+				>
+					{label}
+				</FlyoutMenuItemTrigger>
+				<FlyoutMenuItemContent onClose={() => setIsOpen(false)}>
+					<MenuList>
+						<ReorderActionMenu
+							label="Reorder menu item"
+							index={index}
+							listSize={amountOfMenuItems}
+							onMoveToTop={() => {
+								dispatch({
+									type: 'top-level-menu-reorder',
+									trigger: 'keyboard',
+									value: value,
+									startIndex: index,
+									finishIndex: 0,
+								});
+								setIsOpen(false);
+							}}
+							onMoveUp={() => {
+								dispatch({
+									type: 'top-level-menu-reorder',
+									trigger: 'keyboard',
+									value: value,
+									startIndex: index,
+									finishIndex: index - 1,
+								});
+								setIsOpen(false);
+							}}
+							onMoveDown={() => {
+								dispatch({
+									type: 'top-level-menu-reorder',
+									trigger: 'keyboard',
+									value: value,
+									startIndex: index,
+									finishIndex: index + 1,
+								});
+								setIsOpen(false);
+							}}
+							onMoveToBottom={() => {
+								dispatch({
+									type: 'top-level-menu-reorder',
+									trigger: 'keyboard',
+									value: value,
+									startIndex: index,
+									finishIndex: amountOfMenuItems - 1,
+								});
+								setIsOpen(false);
+							}}
+						/>
+					</MenuList>
+				</FlyoutMenuItemContent>
+			</FlyoutMenuItem>
+			{dragPreview}
+		</>
+	);
+}

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

@@ -0,0 +1,361 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+
+import { jsx } from '@compiled/react';
+import invariant from 'tiny-invariant';
+
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { MenuList } from '@atlaskit/navigation-system';
+import { SideNavContent } from '@atlaskit/navigation-system/layout/side-nav';
+import { GroupDropIndicator } from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/group-drop-indicator';
+import {
+	extractInstruction,
+	type Instruction,
+} from '@atlaskit/navigation-system/side-nav-items/drag-and-drop/hitbox';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { triggerPostMoveFlash } from '@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash';
+import * as liveRegion from '@atlaskit/pragmatic-drag-and-drop-live-region';
+import {
+	dropTargetForElements,
+	monitorForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+
+import {
+	getInitialData,
+	isFilterData,
+	isProjectData,
+	isTopLevelItemData,
+	type TAction,
+	type TData,
+	type TTopLevelItem,
+} from './data';
+import { find } from './filters/filter-tree-utils';
+import { FiltersMenuItem } from './filters/filters-menu-item';
+import { ForYouMenuItem } from './for-you/for-you-menu-item';
+import { ProjectsMenuItem } from './projects/projects-menu-item';
+import { RecentMenuItem } from './recent/recent-menu-item';
+import { reduce } from './reducer';
+import { createRegistry, RegistryContext } from './registry';
+import { StarredMenuItem } from './starred/starred-menu-item';
+import {
+	DispatchContext,
+	GetDataContext,
+	LastActionContext,
+	type TDispatchContextValue,
+	type TGetDataContextValue,
+} from './state-context';
+
+const topLevelMap: {
+	[TName in TTopLevelItem]: (args: {
+		data: TData;
+		index: number;
+		amountOfMenuItems: number;
+	}) => ReactNode;
+} = {
+	'for-you': ({ index, amountOfMenuItems }) => (
+		<ForYouMenuItem index={index} amountOfMenuItems={amountOfMenuItems} />
+	),
+	starred: ({ index, amountOfMenuItems }) => (
+		<StarredMenuItem index={index} amountOfMenuItems={amountOfMenuItems} />
+	),
+	recent: ({ index, amountOfMenuItems }) => (
+		<RecentMenuItem index={index} amountOfMenuItems={amountOfMenuItems} />
+	),
+	projects: ({ data, index, amountOfMenuItems }) => (
+		<ProjectsMenuItem
+			projects={data.projects}
+			index={index}
+			amountOfMenuItems={amountOfMenuItems}
+		/>
+	),
+	filters: ({ data, index, amountOfMenuItems }) => (
+		<FiltersMenuItem filters={data.filters} index={index} amountOfMenuItems={amountOfMenuItems} />
+	),
+};
+
+function getReorderFinishIndex({
+	indexOfTarget,
+	instruction,
+}: {
+	indexOfTarget: number;
+	instruction: Instruction;
+}): number {
+	if (instruction.operation === 'reorder-before') {
+		return indexOfTarget;
+	}
+	if (instruction.operation === 'reorder-after') {
+		return indexOfTarget + 1;
+	}
+	return indexOfTarget;
+}
+
+function getPosition(index: number) {
+	return index + 1;
+}
+
+export function Sidebar() {
+	const [data, setData] = useState(getInitialData);
+	const stableData = useStableRef(data);
+	const [registry] = useState(createRegistry);
+	const ref = useRef<HTMLDivElement | null>(null);
+	const [state, setState] = useState<'idle' | 'is-over'>('idle');
+	const scrollableRef = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		return monitorForElements({
+			canMonitor: ({ source }) =>
+				isTopLevelItemData(source.data) || isProjectData(source.data) || isFilterData(source.data),
+			onDrop({ source, location }) {
+				const dragging = source.data;
+				const [innerMost] = location.current.dropTargets;
+
+				if (!innerMost) {
+					return;
+				}
+				const dropTargetData = innerMost.data;
+
+				const instruction: Instruction | null = extractInstruction(dropTargetData);
+				if (!instruction) {
+					return;
+				}
+
+				// top level item dragging onto top level item
+				if (isTopLevelItemData(dragging) && isTopLevelItemData(dropTargetData)) {
+					setData((current) => {
+						const startIndex = current.topLevelItems.indexOf(dragging.value);
+
+						// Need to know what the indexes would be without the dragging item
+						const withoutDraggingItem = current.topLevelItems.filter(
+							(item) => item !== dragging.value,
+						);
+						const indexOfTarget = withoutDraggingItem.indexOf(dropTargetData.value);
+
+						const finishIndex = getReorderFinishIndex({ indexOfTarget, instruction });
+
+						const action: TAction = {
+							type: 'top-level-menu-reorder',
+							value: dragging.value,
+							startIndex,
+							finishIndex,
+							trigger: 'pointer',
+						};
+
+						return reduce(current, action);
+					});
+					return;
+				}
+
+				// project dragging onto project
+				if (isProjectData(dragging) && isProjectData(dropTargetData)) {
+					// only supporting dragging projects within the same group
+					if (dragging.groupName !== dropTargetData.groupName) {
+						return;
+					}
+
+					setData((current) => {
+						const list = current.projects[dragging.groupName];
+						const startIndex = list.findIndex((project) => project.id === dragging.id);
+
+						// Need to know what the indexes would be without the dragging item
+						const withoutDraggingProject = list.filter((project) => project.id !== dragging.id);
+
+						const indexOfTarget = withoutDraggingProject.findIndex(
+							(project) => project.id === dropTargetData.id,
+						);
+
+						const finishIndex = getReorderFinishIndex({ indexOfTarget, instruction });
+
+						const action: TAction = {
+							type: 'reorder-project',
+							draggingId: dragging.id,
+							groupName: dragging.groupName,
+							startIndex,
+							finishIndex,
+							trigger: 'pointer',
+						};
+
+						return reduce(current, action);
+					});
+				}
+
+				// filter dragging onto project
+				if (isFilterData(dragging) && isFilterData(dropTargetData)) {
+					// 1. lookup the dragging filter
+					// 2. remove it from the tree
+					// 3. insert it into the tree where it makes sense
+					setData((current) => {
+						const action: TAction = {
+							type: 'filter-move',
+							draggingId: dragging.id,
+							targetId: dropTargetData.id,
+							operation: instruction.operation,
+							trigger: 'pointer',
+						};
+
+						return reduce(current, action);
+					});
+				}
+			},
+		});
+	}, []);
+
+	// setup auto scrolling for sidenav scroll container
+	useEffect(() => {
+		const scrollable = scrollableRef.current;
+		invariant(scrollable);
+		return autoScrollForElements({
+			element: scrollable,
+			canScroll: ({ source }) =>
+				isProjectData(source.data) || isFilterData(source.data) || isTopLevelItemData(source.data),
+		});
+	}, []);
+
+	useEffect(() => {
+		const action = data.lastAction;
+		if (!action) {
+			return;
+		}
+		if (action.type === 'top-level-menu-reorder') {
+			const element = registry.getElementForTopLevelItem(action.value);
+			if (!element) {
+				return;
+			}
+			triggerPostMoveFlash(element);
+
+			if (action.trigger === 'keyboard') {
+				// .focus() seems to be more reliable in the next task when used with VoiceOver
+				setTimeout(() => element.focus());
+			}
+
+			// TODO: screen reader announce
+			liveRegion.announce(
+				`The top level menu item ${action.value} has moved from position ${getPosition(action.startIndex)} to ${getPosition(action.finishIndex)}`,
+			);
+
+			return;
+		}
+
+		if (action.type === 'reorder-project') {
+			const element = registry.getElementForProject(action.draggingId);
+			if (!element) {
+				return;
+			}
+			triggerPostMoveFlash(element);
+
+			if (action.trigger === 'keyboard') {
+				// .focus() seems to be more reliable in the next task when used with VoiceOver
+				setTimeout(() => element.focus());
+			}
+
+			const project = stableData.current.projects[action.groupName].find(
+				(project) => project.id === action.draggingId,
+			);
+			invariant(project);
+
+			liveRegion.announce(
+				`The project ${project.name} has moved from position ${getPosition(action.startIndex)} to ${getPosition(action.finishIndex)}`,
+			);
+
+			return;
+		}
+
+		// TODO: after a move, should also expand all required tree items
+		// to make the moved item visible
+		if (action.type === 'filter-move') {
+			const element = registry.getElementForFilter(action.draggingId);
+			if (!element) {
+				return;
+			}
+			triggerPostMoveFlash(element);
+
+			if (action.trigger === 'keyboard') {
+				// .focus() seems to be more reliable in the next task when used with VoiceOver
+				setTimeout(() => element.focus());
+			}
+
+			const message: string = (() => {
+				const filter = find(stableData.current.filters, action.draggingId);
+				const target = find(stableData.current.filters, action.targetId);
+				invariant(filter && target, 'unable to find elements');
+				if (action.operation === 'combine') {
+					return `The filter ${filter.name} is now a child of ${target.name}`;
+				}
+
+				if (action.operation === 'reorder-after') {
+					return `The filter ${filter.name} is now positioned after ${target.name}`;
+				}
+
+				return `The filter ${filter.name} is now positioned before ${target.name}`;
+			})();
+
+			liveRegion.announce(message);
+
+			return;
+		}
+	}, [registry, stableData, data.lastAction]);
+
+	// Cleanup our live region when unmounted
+	useEffect(() => {
+		return () => liveRegion.cleanup();
+	}, []);
+
+	useEffect(() => {
+		const element = ref.current;
+		invariant(element);
+		return dropTargetForElements({
+			element,
+			canDrop: ({ source }) => isTopLevelItemData(source.data),
+			onDragStart() {
+				setState('is-over');
+			},
+			onDragEnter() {
+				setState('is-over');
+			},
+			onDragLeave() {
+				setState('idle');
+			},
+			onDrop() {
+				setState('idle');
+			},
+		});
+	}, []);
+
+	const dispatch: TDispatchContextValue = useCallback(function dispatch(action: TAction) {
+		setData((current) => reduce(current, action));
+	}, []);
+
+	const getData: TGetDataContextValue = useCallback(
+		function getData() {
+			return stableData.current;
+		},
+		[stableData],
+	);
+
+	return (
+		<SideNavContent ref={scrollableRef}>
+			<GetDataContext.Provider value={getData}>
+				<DispatchContext.Provider value={dispatch}>
+					<LastActionContext.Provider value={data.lastAction}>
+						<RegistryContext.Provider value={registry}>
+							<MenuList>
+								<GroupDropIndicator ref={ref} isActive={state === 'is-over'}>
+									{data.topLevelItems.map((item, index, array) => {
+										return (
+											<Fragment key={item}>
+												{topLevelMap[item]({ data, index, amountOfMenuItems: array.length })}
+											</Fragment>
+										);
+									})}
+								</GroupDropIndicator>
+							</MenuList>
+						</RegistryContext.Provider>
+					</LastActionContext.Provider>
+				</DispatchContext.Provider>
+			</GetDataContext.Provider>
+		</SideNavContent>
+	);
+}

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

@@ -0,0 +1,29 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@compiled/react';
+
+import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
+
+import { SharedTopLevelFlyout } from '../shared-top-level-flyout';
+
+export function StarredMenuItem({
+	index,
+	amountOfMenuItems,
+}: {
+	index: number;
+	amountOfMenuItems: number;
+}) {
+	return (
+		<SharedTopLevelFlyout
+			label="Starred"
+			value="starred"
+			icon={<StarUnstarredIcon label="" />}
+			index={index}
+			amountOfMenuItems={amountOfMenuItems}
+		/>
+	);
+}

package/examples/drag-and-drop/jira/state-context.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from 'react';
+
+import invariant from 'tiny-invariant';
+
+import type { TAction, TData } from './data';
+
+export type TDispatchContextValue = (action: TAction) => void;
+
+export const DispatchContext = createContext<TDispatchContextValue | null>(null);
+
+export function useDispatch(): TDispatchContextValue {
+	const dispatch = useContext(DispatchContext);
+	invariant(dispatch, 'Could not find dispatch');
+	return dispatch;
+}
+
+export type TGetDataContextValue = () => TData;
+
+export const GetDataContext = createContext<TGetDataContextValue | null>(null);
+
+export function useGetData() {
+	const getData = useContext(GetDataContext);
+	invariant(getData, 'Could not find getData()');
+	return getData;
+}
+
+export const LastActionContext = createContext<TAction | null>(null);
+/**
+ * Not ideal. Use sparingly
+ */
+export function useLastAction(): TAction | null {
+	const action = useContext(LastActionContext);
+	return action;
+}

package/examples/drag-and-drop/jira/top-level-shared-more-menu.tsx

@@ -0,0 +1,99 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Ref, useState } from 'react';
+
+import { jsx } from '@compiled/react';
+
+import { IconButton } from '@atlaskit/button/new';
+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 type { TTopLevelItem } from './data';
+import { ReorderActionMenu } from './reorder-actions';
+import { useDispatch } from './state-context';
+
+export function TopLevelSharedMoreMenu({
+	value,
+	index,
+	amountOfMenuItems,
+}: {
+	value: TTopLevelItem;
+	index: number;
+	amountOfMenuItems: number;
+}) {
+	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="" />}>Settings</DropdownItem>
+			</DropdownItemGroup>
+			<DropdownItemGroup hasSeparator>
+				<ReorderActionMenu
+					label="Reorder menu item"
+					index={index}
+					listSize={amountOfMenuItems}
+					onMoveToTop={() => {
+						dispatch({
+							type: 'top-level-menu-reorder',
+							trigger: 'keyboard',
+							value,
+							startIndex: index,
+							finishIndex: 0,
+						});
+						setIsOpen(false);
+					}}
+					onMoveUp={() => {
+						dispatch({
+							type: 'top-level-menu-reorder',
+							trigger: 'keyboard',
+							value,
+							startIndex: index,
+							finishIndex: index - 1,
+						});
+						setIsOpen(false);
+					}}
+					onMoveDown={() => {
+						dispatch({
+							type: 'top-level-menu-reorder',
+							trigger: 'keyboard',
+							value,
+							startIndex: index,
+							finishIndex: index + 1,
+						});
+						setIsOpen(false);
+					}}
+					onMoveToBottom={() => {
+						dispatch({
+							type: 'top-level-menu-reorder',
+							trigger: 'keyboard',
+							value,
+							startIndex: index,
+							finishIndex: amountOfMenuItems - 1,
+						});
+						setIsOpen(false);
+					}}
+				/>
+			</DropdownItemGroup>
+		</DropdownMenu>
+	);
+}

package/examples/drag-and-drop/sidebar-example-container.tsx

@@ -0,0 +1,38 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+
+import { cssMap, jsx } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+
+// Pushing our example off the corner of the screen
+const outersStyles = cssMap({
+	root: {
+		paddingTop: token('space.200'),
+		paddingRight: token('space.200'),
+		paddingBottom: token('space.200'),
+		paddingLeft: token('space.200'),
+	},
+});
+
+const containerStyles = cssMap({
+	root: {
+		width: '320px', // default width of the sidebar
+		backgroundColor: token('elevation.surface'),
+		borderColor: token('color.border'),
+		borderWidth: token('border.width'),
+		borderRadius: token('border.radius'),
+		borderStyle: 'solid',
+	},
+});
+
+export function SidebarExampleContainer({ children }: { children: ReactNode }) {
+	return (
+		<div css={outersStyles.root}>
+			<div css={containerStyles.root}>{children}</div>
+		</div>
+	);
+}