@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.tsx

@@ -1,124 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { forwardRef, type ReactNode } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
-import { PopupTrigger } from '@atlaskit/popup/experimental';
-import { token } from '@atlaskit/tokens';
-
-import { MenuItemBase } from '../menu-item';
-import { type COLLAPSE_ELEM_BEFORE_TYPE } from '../menu-item-signals';
-import type { MenuItemCommonProps, MenuItemOnClick } from '../types';
-
-const elemAfterStyles = cssMap({
-	root: {
-		paddingInline: token('space.075'),
-		// Flip the chevron icon when the direction is right-to-left
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-		'[dir="rtl"] &': {
-			transform: 'scaleX(-1)',
-		},
-	},
-});
-
-export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
-	/**
-	 * `ReactNode` to be placed visually before the `children`.
-	 *
-	 * This `ReactNode` will be rendered visually on top of the main
-	 * interactive element for the menu item. If this element does not
-	 * contain an interactive element (`button` or `a`) then `pointer-events`
-	 * will be set to `none` on this slot so that users can click through
-	 * this element onto the main interactive element of the menu item.
-	 *
-	 * If you want to collapse the `elemBefore` so it takes up no space,
-	 * then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
-	 * collapsing the `elemBefore` can break visual alignment and
-	 * will make it difficult for users to visually distinguish levels
-	 * in the side navigation.
-	 *
-	 * @example
-	 *
-	 * ```tsx
-	 * <FlyoutMenuItemTrigger elemBefore={<HomeIcon label="home" />}>Home</FlyoutMenuItemTrigger>
-	 *
-	 * // collapse the elemBefore
-	 * <FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>Home</FlyoutMenuItemTrigger>
-	 * ```
-	 */
-	elemBefore?: ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
-
-	/**
-	 * Called when the user has clicked on the trigger.
-	 *
-	 * If you are controlling the open state of the flyout menu, use this to update your state.
-	 */
-	onClick?: MenuItemOnClick<HTMLButtonElement>;
-
-	/**
-	 * Indicates that the menu item is selected.
-	 */
-	isSelected?: boolean;
-};
-
-/**
- * __FlyoutMenuItemTrigger__
- *
- * The button that toggles the flyout menu.
- */
-export const FlyoutMenuItemTrigger = forwardRef<HTMLButtonElement, FlyoutMenuItemTriggerProps>(
-	(
-		{
-			children,
-			elemBefore,
-			onClick,
-			isSelected,
-			interactionName,
-			testId,
-			isContentTooltipDisabled,
-			visualContentRef,
-			isDragging,
-			hasDragIndicator,
-			dropIndicator,
-		},
-		forwardedRef,
-	) => (
-		<PopupTrigger>
-			{({
-				ref,
-				'aria-controls': ariaControls,
-				'aria-expanded': ariaExpanded,
-				'aria-haspopup': ariaHasPopup,
-			}) => (
-				<MenuItemBase
-					testId={testId}
-					ref={mergeRefs([ref, forwardedRef])}
-					visualContentRef={visualContentRef}
-					elemBefore={elemBefore}
-					elemAfter={
-						<div css={elemAfterStyles.root}>
-							<ChevronRightIcon label="" color={token('color.icon')} size="small" />
-						</div>
-					}
-					onClick={onClick}
-					ariaControls={ariaControls}
-					ariaExpanded={ariaExpanded}
-					ariaHasPopup={ariaHasPopup}
-					interactionName={interactionName}
-					isContentTooltipDisabled={isContentTooltipDisabled}
-					isSelected={isSelected}
-					isDragging={isDragging}
-					hasDragIndicator={hasDragIndicator}
-					dropIndicator={dropIndicator}
-				>
-					{children}
-				</MenuItemBase>
-			)}
-		</PopupTrigger>
-	),
-);

package/src/ui/menu-item/flyout-menu-item/flyout-menu-item.tsx

@@ -1,98 +0,0 @@
-import React, { forwardRef, type ReactNode, useEffect } from 'react';
-
-import useControlled from '@atlaskit/ds-lib/use-controlled';
-import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-import { Popup } from '@atlaskit/popup/experimental';
-
-import { MenuListItem } from '../menu-list-item';
-
-import { IsOpenContext, SetIsOpenContext } from './flyout-menu-item-context';
-
-export type FlyoutMenuItemProps = {
-	/**
-	 * Should contain `FlyoutMenuItemTrigger` and `FlyoutMenuItemContent`.
-	 */
-	children: ReactNode;
-	/**
-	 * ID that is assigned to the popup container element and used to associate the trigger with the content.
-	 */
-	id?: string;
-	/**
-	 * Allows to control the open state of the flyout externally.
-	 *
-	 * If you are controlling the state, you should update your state using:
-	 * - `onClick` on the `FlyoutMenuItemTrigger`
-	 * - `onClose` on the `FlyoutMenuItemContent`
-	 */
-	isOpen?: boolean;
-	/**
-	 * Whether the flyout menu is open by default.
-	 *
-	 * You can use this to set the default expansion state without needing to entirely control the state.
-	 */
-	isDefaultOpen?: boolean;
-	/**
-	 * Callback that is called when the flyout menu is opened or closed.
-	 *
-	 * Can be used for analytics purposes when you are not controlling the state yourself.
-	 */
-	onOpenChange?: (isOpen: boolean) => void;
-};
-
-/**
- * __FlyoutMenuItem__
- *
- * Displays content in a flyout menu, triggered by a button.
- *
- * The top-level component that contains the trigger and content of a flyout menu.
- *
- * Usage example:
- * ```tsx
- * <FlyoutMenuItem>
- *   <FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
- *   <FlyoutMenuItemContent>
- *     <MenuList>
- *       <ButtonMenuItem>Item 1</ButtonMenuItem>
- *       <ButtonMenuItem>Item 2</ButtonMenuItem>
- *     </MenuList>
- *   </FlyoutMenuItemContent>
- * </FlyoutMenuItem>
- * ```
- */
-export const FlyoutMenuItem = forwardRef<HTMLDivElement, FlyoutMenuItemProps>(
-	(
-		{ children, id, isOpen: isOpenControlled, isDefaultOpen = false, onOpenChange },
-		forwardedRef,
-	) => {
-		const [isOpen, setIsOpen] = useControlled(isOpenControlled, () => isDefaultOpen);
-
-		const previousIsOpen = usePreviousValue(isOpen);
-
-		useEffect(() => {
-			if (previousIsOpen === undefined || previousIsOpen === isOpen) {
-				/**
-				 * The previous value is `undefined` on initialization, so if it is `undefined` then the value hasn't changed.
-				 *
-				 * The previous value can be equal to the current one if the component re-renders due to something else changing.
-				 *
-				 * In both cases the value hasn't changed and we don't want to notify consumers.
-				 */
-				return;
-			}
-
-			onOpenChange?.(isOpen);
-		}, [isOpen, onOpenChange, previousIsOpen]);
-
-		return (
-			<IsOpenContext.Provider value={isOpen}>
-				<SetIsOpenContext.Provider value={setIsOpen}>
-					<MenuListItem ref={forwardedRef}>
-						<Popup id={id} isOpen={isOpen}>
-							{children}
-						</Popup>
-					</MenuListItem>
-				</SetIsOpenContext.Provider>
-			</IsOpenContext.Provider>
-		);
-	},
-);

package/src/ui/menu-item/link-menu-item.tsx

@@ -1,119 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type Ref, useMemo, useRef } from 'react';
-
-import type { RouterLinkComponentProps } from '@atlaskit/app-provider';
-import { cssMap, jsx } from '@atlaskit/css';
-import mergeRefs from '@atlaskit/ds-lib/merge-refs';
-
-import { forwardRefWithGeneric } from '../../components/forward-ref-with-generic';
-import { ListItem } from '../../components/list-item';
-
-import { MenuItemBase } from './menu-item';
-import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
-import { useScrollMenuItemIntoView } from './use-scroll-menu-item-into-view';
-
-const listItemStyles = cssMap({
-	root: {
-		/**
-		 * Setting a large scroll margin to prevent _horizontally_ scrolling the selected menu item into view.
-		 * `scrollIntoView` will scroll on both axes and does not allow completely opting out of scrolling for a particular axis.
-		 *
-		 * We have specifically chosen to prevent horizontal scrolling as deeply nested menu items are not a common use case, and
-		 * horizontal scrolling can cause the the sidebar to look inconsistent on load.
-		 *
-		 * We are using a large static value to here to handle all realistic nesting levels. As an alternative we could dynamically
-		 * calculate this based on the current nesting level, but it isn't necessary and would be a performance hit.
-		 */
-		scrollMarginInline: '1000px',
-	},
-});
-
-export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = never> =
-	MenuItemLinkOrButtonCommonProps &
-		RouterLinkComponentProps<RouterLinkConfig> & {
-			/**
-			 * The native `target` attribute for the anchor element.
-			 */
-			target?: HTMLAnchorElement['target'];
-			/**
-			 * Whether the menu item is selected.
-			 */
-			isSelected?: boolean;
-
-			/**
-			 * Called when the user has clicked on the trigger content.
-			 */
-			onClick?: MenuItemOnClick<HTMLAnchorElement>;
-		};
-
-const LinkMenuItemNoRef = <RouterLinkConfig extends Record<string, any> = never>(
-	{
-		testId,
-		actions,
-		children,
-		description,
-		elemAfter,
-		elemBefore,
-		href,
-		target,
-		actionsOnHover,
-		isSelected,
-		onClick,
-		interactionName,
-		isContentTooltipDisabled,
-		visualContentRef,
-		listItemRef,
-		isDragging,
-		hasDragIndicator,
-		dropIndicator,
-	}: LinkMenuItemProps<RouterLinkConfig>,
-	forwardedRef?: Ref<HTMLAnchorElement>,
-) => {
-	const itemRef = useRef<HTMLDivElement>(null);
-
-	useScrollMenuItemIntoView({
-		elementRef: itemRef,
-		isSelected: isSelected ?? false,
-	});
-
-	const ref = useMemo(() => {
-		return mergeRefs([itemRef, listItemRef ?? null]);
-	}, [itemRef, listItemRef]);
-
-	return (
-		<ListItem ref={ref} xcss={listItemStyles.root}>
-			<MenuItemBase
-				testId={testId}
-				description={description}
-				actions={actions}
-				elemAfter={elemAfter}
-				// TODO Always use "open in new window" icon when `openInNewWindow` prop is true
-				elemBefore={elemBefore}
-				href={href}
-				target={target}
-				actionsOnHover={actionsOnHover}
-				isSelected={isSelected}
-				onClick={onClick}
-				ref={forwardedRef}
-				visualContentRef={visualContentRef}
-				interactionName={interactionName}
-				isContentTooltipDisabled={isContentTooltipDisabled}
-				isDragging={isDragging}
-				hasDragIndicator={hasDragIndicator}
-				dropIndicator={dropIndicator}
-			>
-				{children}
-			</MenuItemBase>
-		</ListItem>
-	);
-};
-
-/**
- * LinkMenuItem
- *
- * A menu item link. It should be used within a `ul`.
- */
-export const LinkMenuItem = forwardRefWithGeneric(LinkMenuItemNoRef);

package/src/ui/menu-item/menu-item-signals.tsx

@@ -1,6 +0,0 @@
-/**
- * A symbol to collapse the `elemBefore` slot.
- * This should be placed in the `elemBefore` prop of supported menu items.
- */
-export const COLLAPSE_ELEM_BEFORE: unique symbol = Symbol('collapse-elem-before');
-export type COLLAPSE_ELEM_BEFORE_TYPE = typeof COLLAPSE_ELEM_BEFORE;