@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/menu-item/drag-and-drop/drag-preview.tsx

@@ -1,98 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import { token } from '@atlaskit/tokens';
-
-import { ExpandableMenuItemLevelContext } from '../expandable-menu-item/expandable-menu-item-level-context';
-import { MenuItemBase } from '../menu-item';
-import { COLLAPSE_ELEM_BEFORE } from '../menu-item-signals';
-
-// Using JavaScript for detecting Safari, as I could not find a reliable way to do it with CSS.
-function isSafari(): boolean {
-	if (process.env.NODE_ENV === 'test') {
-		return false;
-	}
-
-	if (typeof window === 'undefined') {
-		return false;
-	}
-
-	const { userAgent } = navigator;
-	return userAgent.includes('AppleWebKit') && !userAgent.includes('Chrome');
-}
-
-const dragPreviewStyles = cssMap({
-	root: {
-		borderWidth: token('border.width'),
-		borderColor: token('color.border'),
-		borderStyle: 'solid',
-		backgroundColor: token('elevation.surface'),
-		// menu items already have a border radius, but adding on this element too
-		// as we are adding a border on this element
-		borderRadius: token('border.radius'),
-
-		// helps the preview feel more feel more balanced
-		paddingInlineEnd: token('space.050'),
-		// cannot go above 280px (web platform limitation), so leaving a bit of room
-		maxWidth: 260,
-	},
-
-	/**
-	 * Unfortunately native drag previews in Safari do not work well with `-webkit-line-clamp`,
-	 * and the width of the drag preview collapses down to be much smaller than it should be.
-	 *
-	 * To get around this, we explicitly set a min width for safari, causing the preview to always
-	 * be at least that size (it will still grow up to the max width)
-	 *
-	 * This is only a temporary measure. We plan on removing `Text` from menu item as a true fix.
-	 *
-	 * _Alternative: bespoke grid and elements for the drag preview_
-	 *
-	 * We could make our own elements here that mirror what menu item is doing (placement and spacing),
-	 * but that feels brittle, as if we make a change to menu item, we would also need to update this call site
-	 */
-	safariFix: {
-		minWidth: 200,
-	},
-});
-
-/**
- * A drag preview for sidebar menu items.
- *
- * The limited API corresponds with the limited amount of information we
- * want to show in drag previews.
- *
- * If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
- * There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
- * need to maintain vertical side navigation vertical alignment in the drag preview.
- *
- * Please ensure the drag preview is pushed away from the users pointer
- * (with `pointerOutsideOfPreview()` from Pragmatic drag and drop) by our
- * standard amount (`{x: token('space.200'), y: token('space.100')`)
- */
-export function DragPreview({
-	elemBefore,
-	children,
-}: {
-	elemBefore?: ReactNode;
-	children: ReactNode;
-}) {
-	return (
-		// Resetting the expandable menu items to 0.
-		// This is to prevent our hidden element from pushing
-		// the drag preview further away from the users pointer
-		<ExpandableMenuItemLevelContext.Provider value={0}>
-			<div css={[dragPreviewStyles.root, isSafari() && dragPreviewStyles.safariFix]}>
-				{/* For drag previews, we can collapse if there is no elemBefore as we don't
-			need to worry about vertical alignment with other elements */}
-				<MenuItemBase elemBefore={elemBefore ?? COLLAPSE_ELEM_BEFORE}>{children}</MenuItemBase>
-			</div>
-		</ExpandableMenuItemLevelContext.Provider>
-	);
-}

package/src/ui/menu-item/drag-and-drop/drop-indicator.tsx

@@ -1,11 +0,0 @@
-/**
- * These outputs where originally created within nav4, but have since moved out into
- * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
- * the pdnd outputs
- */
-
-export {
-	type Instruction,
-	type Operation,
-	DropIndicator,
-} from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/list-item';

package/src/ui/menu-item/drag-and-drop/group-drop-indicator.tsx

@@ -1,7 +0,0 @@
-/**
- * These outputs where originally created within nav4, but have since moved out into
- * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
- * the pdnd outputs
- */
-
-export { GroupDropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/group';

package/src/ui/menu-item/drag-and-drop/hitbox.tsx

@@ -1,13 +0,0 @@
-/**
- * These outputs where originally created within nav4, but have since moved out into
- * pragmatic drag and drop itself for broader usage. Now this file simply re-exports
- * the pdnd outputs
- */
-
-export {
-	type Availability,
-	type Operation,
-	type Instruction,
-	attachInstruction,
-	extractInstruction,
-} from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';

package/src/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.tsx

@@ -1,243 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { jsx } from '@compiled/react';
-import { createPortal } from 'react-dom';
-import invariant from 'tiny-invariant';
-
-import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/list-item';
-import {
-	draggable,
-	dropTargetForElements,
-	type ElementGetFeedbackArgs,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import { token } from '@atlaskit/tokens';
-
-import { DragPreview } from './drag-preview';
-import { DropIndicator } from './drop-indicator';
-import { attachInstruction, extractInstruction } from './hitbox';
-
-type TInternalState =
-	| {
-			type: 'idle';
-	  }
-	| {
-			type: 'preview';
-			container: HTMLElement;
-			ui: {
-				elemBefore?: ReactNode;
-				content: ReactNode;
-			};
-	  }
-	| {
-			type: 'dragging';
-	  }
-	| {
-			type: 'is-over';
-			instruction: Instruction | null;
-	  };
-
-export type TMenuItemDragAndDropState =
-	| Exclude<TInternalState, { type: 'preview' }>
-	| {
-			type: 'preview';
-	  };
-
-const idle: TInternalState = { type: 'idle' };
-
-type TPDNDDraggableArgs = Required<Parameters<typeof draggable>[0]>;
-type TPDNDDropTargetArgs = Required<Parameters<typeof dropTargetForElements>[0]>;
-
-type TDraggableArgs = {
-	// Giving this function the same parameters as `getDraggableInitialData`
-	getDragPreviewPieces: (args: Parameters<TPDNDDraggableArgs['getInitialData']>[0]) => {
-		elemBefore?: ReactNode;
-		content: ReactNode;
-	};
-	getInitialData: (
-		args: Parameters<TPDNDDraggableArgs['getInitialData']>[0],
-	) => Record<string | symbol, unknown>;
-
-	canDrag?: TPDNDDraggableArgs['canDrag'];
-};
-
-type TDropTargetArgs = {
-	getOperations: (
-		args: Parameters<TPDNDDropTargetArgs['getData']>[0],
-	) => Parameters<typeof attachInstruction>[1]['operations'];
-	getData: TPDNDDropTargetArgs['getData'];
-	canDrop: TPDNDDropTargetArgs['canDrop'];
-};
-
-/**
- * A convenience helper for setting up drag and drop for menu items
- *
- * - Don't include the `draggable` property if you don't want the menu item to be a draggable
- * - Don't include the `dropTarget` property if you don't want the menu item to be a drop target
- */
-export function useMenuItemDragAndDrop({
-	draggable: draggableArgs,
-	dropTarget: dropTargetArgs,
-}: {
-	draggable?: TDraggableArgs;
-	dropTarget?: TDropTargetArgs;
-}) {
-	const draggableAnchorRef = useRef<HTMLAnchorElement | null>(null);
-	const draggableButtonRef = useRef<HTMLButtonElement | null>(null);
-	const dropTargetRef = useRef<HTMLDivElement | null>(null);
-	const [internalState, setInternalState] = useState<TInternalState>(idle);
-
-	const getDraggableElement = useCallback(() => {
-		return draggableAnchorRef.current ?? draggableButtonRef.current ?? null;
-	}, []);
-
-	// Set up draggable
-	useEffect(() => {
-		// Don't set up a draggable if there are no draggable args
-		if (!draggableArgs) {
-			return;
-		}
-		const element = getDraggableElement();
-		invariant(element, `draggableAnchorRef or draggableButtonRef not set`);
-
-		return draggable({
-			element,
-			getInitialData: draggableArgs.getInitialData,
-			canDrag: draggableArgs.canDrag,
-			onGenerateDragPreview({ nativeSetDragImage, source, location }) {
-				setCustomNativeDragPreview({
-					nativeSetDragImage,
-					getOffset: pointerOutsideOfPreview({
-						x: token('space.200'),
-						y: token('space.100'),
-					}),
-					render({ container }) {
-						const args: ElementGetFeedbackArgs = {
-							dragHandle: source.dragHandle,
-							element: source.element,
-							input: location.current.input,
-						};
-						setInternalState({
-							type: 'preview',
-							container,
-							ui: draggableArgs.getDragPreviewPieces(args),
-						});
-					},
-				});
-			},
-			onDragStart() {
-				setInternalState({ type: 'dragging' });
-			},
-			onDrop() {
-				setInternalState(idle);
-			},
-		});
-	}, [draggableArgs, getDraggableElement]);
-
-	// Set up drop target
-	useEffect(() => {
-		if (!dropTargetArgs) {
-			return;
-		}
-
-		// Don't need to provide a draggable element to have a drop target.
-		// Using this element in our `canDrop` check
-		const draggableElement = getDraggableElement();
-
-		const dropTarget = dropTargetRef.current;
-		invariant(dropTarget, `dropTargetRef was not set`);
-
-		return dropTargetForElements({
-			element: dropTarget,
-			// cannot drop on self
-			canDrop: (args): boolean => {
-				// cannot drop on self
-				if (args.source.element === draggableElement) {
-					return false;
-				}
-				if (dropTargetArgs.canDrop) {
-					return dropTargetArgs.canDrop(args);
-				}
-				return true;
-			},
-			// menu items are always sticky, and the GroupDropIndicator should clear stickiness
-			getIsSticky: () => true,
-			getData(args) {
-				const data = dropTargetArgs.getData?.(args) ?? {};
-				const operations = dropTargetArgs.getOperations(args);
-				return attachInstruction(data, {
-					input: args.input,
-					element: args.element,
-					operations,
-				});
-			},
-			onDragStart({ self }) {
-				const instruction: Instruction | null = extractInstruction(self.data);
-				setInternalState({ type: 'is-over', instruction });
-			},
-			onDrag({ self }) {
-				const instruction: Instruction | null = extractInstruction(self.data);
-				setInternalState((current) => {
-					if (
-						current.type === 'is-over' &&
-						instruction?.operation === current.instruction?.operation &&
-						instruction?.blocked === current.instruction?.blocked
-					) {
-						return current;
-					}
-					return { type: 'is-over', instruction };
-				});
-			},
-			onDragLeave() {
-				setInternalState(idle);
-			},
-			onDrop() {
-				setInternalState(idle);
-			},
-			onDragEnter({ self }) {
-				const instruction: Instruction | null = extractInstruction(self.data);
-				setInternalState({ type: 'is-over', instruction });
-			},
-		});
-	}, [dropTargetArgs, getDraggableElement]);
-
-	const dragPreview: ReactNode = (() => {
-		if (internalState.type !== 'preview') {
-			return null;
-		}
-
-		return createPortal(
-			<DragPreview elemBefore={internalState.ui.elemBefore}>
-				{internalState.ui.content}
-			</DragPreview>,
-			internalState.container,
-		);
-	})();
-
-	const dropIndicator = internalState.type === 'is-over' && internalState.instruction && (
-		<DropIndicator instruction={internalState.instruction} />
-	);
-
-	const state: TMenuItemDragAndDropState = useMemo(() => {
-		if (internalState.type === 'preview') {
-			return { type: 'preview' };
-		}
-		// returning a new object to avoid modification of our `internalState` object
-		return { ...internalState };
-	}, [internalState]);
-
-	return {
-		state,
-		draggableButtonRef,
-		dropTargetRef,
-		draggableAnchorRef,
-		dragPreview,
-		dropIndicator,
-	};
-}

package/src/ui/menu-item/drag-handle.tsx

@@ -1,42 +0,0 @@
-/**
- * @jsxFrag
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-import { cssMap, jsx } from '@compiled/react';
-
-import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	root: {
-		color: token('color.text.subtle'),
-		// `--drag-handle-display` is set in `menu-item`.
-		// We _could_ pull the variable out into a seperate file
-		// (doing so does seem to work with react)
-		// But doing so a styling standard violation 🤷‍♂️
-		display: `var(--drag-handle-display, none)`,
-		flexDirection: 'column',
-		justifyContent: 'center',
-		position: 'absolute',
-		top: 0,
-		bottom: 0,
-		insetInlineStart: 0,
-		// pull backwards outside of the bounds of the element
-		marginInlineStart: token('space.negative.150'),
-
-		// Note: we are not using `pointer-events:none` as it's important that the
-		// drag handle be a draggable target, even if it's outside the bounds
-		// of the full width element
-	},
-});
-
-// Using default export to play well with React.lazy
-export default function DragHandle() {
-	return (
-		<div css={styles.root} aria-hidden="true">
-			<DragHandleVerticalIcon label="" size="small" />
-		</div>
-	);
-}

package/src/ui/menu-item/expandable-menu-item/expandable-menu-item-content.tsx

@@ -1,84 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { forwardRef, type ReactNode, useRef } from 'react';
-
-import { cssMap, cx, jsx } from '@compiled/react';
-
-import { List } from '../../../components/list';
-import { expandableMenuItemIndentation } from '../constants';
-
-import {
-	AreAllAncestorsExpandedContext,
-	LevelContext,
-	useAreAllAncestorsExpanded,
-	useIsExpanded,
-	useLevel,
-} from './expandable-menu-item-context';
-
-const styles = cssMap({
-	content: {
-		// Padding is used to achieve alignment of content when nesting expandable menu items.
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-		paddingInlineStart: expandableMenuItemIndentation,
-	},
-	collapsedContent: {
-		display: 'none',
-	},
-});
-
-export type ExpandableMenuItemContentProps = {
-	/**
-	 * The contents of the expandable menu item.
-	 */
-	children: ReactNode;
-};
-
-/**
- * __ExpandableMenuItemContent__
- *
- * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
- */
-export const ExpandableMenuItemContent = forwardRef<HTMLDivElement, ExpandableMenuItemContentProps>(
-	({ children }, forwardedRef) => {
-		const isExpanded = useIsExpanded();
-		const level = useLevel();
-		const hasExpanded = useRef(false);
-		const areAllAncestorsExpanded = useAreAllAncestorsExpanded();
-
-		if (!isExpanded && !hasExpanded.current) {
-			return null;
-		}
-
-		hasExpanded.current = true;
-
-		return (
-			<LevelContext.Provider value={level + 1}>
-				{/**
-				 * We are providing `AreAllAncestorsExpandedContext` in `ExpandableMenuItemContent` rather than within `ExpandableMenuItem`,
-				 * so that the `ExpandableMenuItemTrigger` element is not affected by whether the current menu item is expanded or not.
-				 *
-				 * This is because the trigger is visually not a child of the `ExpandableMenuItem`. It is visible regardless
-				 * of whether its `ExpandableMenuItem` is expanded or not.
-				 */}
-				<AreAllAncestorsExpandedContext.Provider
-					value={
-						/**
-						 * By combining the current ancestor and with the current menu item's state, all nested menu items will know if their
-						 * ancestor menu items are all expanded.
-						 */
-						areAllAncestorsExpanded && isExpanded
-					}
-				>
-					<List
-						ref={forwardedRef}
-						xcss={cx(styles.content, !isExpanded && styles.collapsedContent)}
-					>
-						{children}
-					</List>
-				</AreAllAncestorsExpandedContext.Provider>
-			</LevelContext.Provider>
-		);
-	},
-);

package/src/ui/menu-item/expandable-menu-item/expandable-menu-item-context.tsx

@@ -1,61 +0,0 @@
-import { createContext, useContext } from 'react';
-
-import invariant from 'tiny-invariant';
-
-import { ExpandableMenuItemLevelContext } from './expandable-menu-item-level-context';
-
-type onExpansionToggle = (isExpanded: boolean) => void;
-
-/**
- * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
- * shown within the menu item tree.
- */
-export const AreAllAncestorsExpandedContext = createContext<boolean | null>(null);
-
-/**
- * A context for storing the isExpanded value of the ExpandableMenuItem.
- */
-export const IsExpandedContext = createContext<boolean | null>(null);
-
-/**
- * A context for storing a function that sets isExpanded value of the ExpandableMenuItem.
- */
-export const SetIsExpandedContext = createContext<((value: boolean) => void) | null>(null);
-
-/**
- * A context for storing a function that triggers when isExpanded value of the ExpandableMenuItem is changed.
- */
-export const OnExpansionToggleContext = createContext<onExpansionToggle | null>(null);
-
-/**
- * A context for storing the level value of the ExpandableMenuItem.
- */
-export const LevelContext = ExpandableMenuItemLevelContext;
-
-export const useIsExpanded = (): boolean => {
-	const context = useContext(IsExpandedContext);
-	invariant(context !== null, 'useIsExpanded must be used within an ExpandableMenuItem');
-	return context;
-};
-
-export const useSetIsExpanded = (): ((value: boolean) => void) => {
-	const context = useContext(SetIsExpandedContext);
-	invariant(context !== null, 'useSetIsExpanded must be used within an ExpandableMenuItem');
-	return context;
-};
-
-export const useOnExpansionToggle = (): onExpansionToggle | null =>
-	useContext(OnExpansionToggleContext);
-
-export const useLevel = (): number => useContext(LevelContext);
-
-/**
- * Whether all ancestor menu items of the current menu item are expanded. Used to know if the current menu item is
- * shown within the menu item tree.
- *
- * It works by combining (using &&) all the expansion states of the current menu item's ancestors.
- *
- * Using `true` as the fallback for cases when the menu item does not have ancestors.
- */
-export const useAreAllAncestorsExpanded = (): boolean =>
-	useContext(AreAllAncestorsExpandedContext) ?? true;

package/src/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.tsx

@@ -1,9 +0,0 @@
-import { createContext } from 'react';
-
-// Note: this context value is in a seperate file as it is consumed
-// by our drag and drop drag preview
-
-/**
- * A context for storing the level value of the ExpandableMenuItem.
- */
-export const ExpandableMenuItemLevelContext = createContext(0);