@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/menu-item/__tests__/vr-tests/menu-item-conditional-tooltip.vr.tsx

@@ -1,312 +0,0 @@
-import { type Hooks, snapshot, type SnapshotTestOptions } from '@af/visual-regression';
-
-import {
-	ButtonMenuItemExample,
-	ExpandableMenuItemExample,
-	FlyoutMenuItemExample,
-	LinkMenuItemExample,
-} from '../../../../../examples/menu-item-conditional-tooltip';
-
-const lightModeVariant: SnapshotTestOptions<Hooks>['variants'] = [
-	{
-		environment: { colorScheme: 'light' },
-		name: 'default',
-	},
-];
-
-// This file has to manually iterate over all cases as our VR testing setup
-// uses this file as a "definition" that is statically extracted.
-
-/**
- * **ButtonMenuItem**
- */
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-[content:short]-[description:short]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-[content:short]-[description:short]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-[content:short]-[description:long]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-[content:short]-[description:long]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-[content:long]-[description:short]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-[content:long]-[description:short]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-[content:long]-[description:long]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-[content:long]-[description:long]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-[content:short]-[description:none]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-[content:short]-[description:none]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-[content:long]-[description:none]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-[content:long]-[description:none]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-with-tooltip-disabled',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-with-tooltip-disabled' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-/**
- * **Actions**
- *
- * Should not have any tooltip when over actions for menu items.
- * Note: not testing `actionsOnHover` as we cannot first trigger
- * a mouse hover and then another hover. We could do a focus in
- * the example to show the actions, but then we are testing the same flow
- * as `actions` anyway.
- */
-
-snapshot(ButtonMenuItemExample, {
-	description: 'button-menu-item-add-action-button',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'button-menu-item-add-action-button' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ButtonMenuItemExample, {
-	description: 'menu-item-button-with-nested-children',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'menu-item-button-with-nested-children' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-/**
- * **LinkMenuItem**
- */
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-[content:short]-[description:short]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-[content:short]-[description:short]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-[content:short]-[description:long]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-[content:short]-[description:long]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-[content:long]-[description:short]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-[content:long]-[description:short]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-[content:long]-[description:long]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-[content:long]-[description:long]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-[content:short]-[description:none]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-[content:short]-[description:none]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-[content:long]-[description:none]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-[content:long]-[description:none]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemExample, {
-	description: 'link-menu-item-with-tooltip-disabled',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'link-menu-item-with-tooltip-disabled' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-/**
- * **ExpandableMenuItem**
- *
- * No descriptions for expandable menu items
- */
-
-snapshot(ExpandableMenuItemExample, {
-	description: 'expandable-menu-item-[content:short]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'expandable-menu-item-[content:short]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ExpandableMenuItemExample, {
-	description: 'expandable-menu-item-[content:long]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'expandable-menu-item-[content:long]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(ExpandableMenuItemExample, {
-	description: 'expandable-menu-item-with-tooltip-disabled',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'expandable-menu-item-with-tooltip-disabled' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-/**
- * **FlyoutMenuItem**
- *
- * No descriptions for flyout menu items
- */
-
-snapshot(FlyoutMenuItemExample, {
-	description: 'flyout-menu-item-[content:short]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'flyout-menu-item-[content:short]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(FlyoutMenuItemExample, {
-	description: 'flyout-menu-item-[content:long]',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'flyout-menu-item-[content:long]' },
-		},
-	],
-	drawsOutsideBounds: true,
-});
-
-snapshot(FlyoutMenuItemExample, {
-	description: 'flyout-menu-item-with-tooltip-disabled',
-	variants: lightModeVariant,
-	states: [
-		{
-			state: 'hovered',
-			selector: { byTestId: 'flyout-menu-item-with-tooltip-disabled' },
-		},
-	],
-	drawsOutsideBounds: true,
-});

package/src/ui/menu-item/__tests__/vr-tests/menu-item.vr.tsx

@@ -1,210 +0,0 @@
-import { Device, type Hooks, snapshot, type SnapshotTestOptions } from '@af/visual-regression';
-
-import {
-	ButtonMenuItemDisabled,
-	ButtonMenuItemDisabledWithActions,
-	ButtonMenuItemExample,
-	ButtonMenuItemRTLExample,
-	ButtonMenuItemWithDropdownActionOpen,
-	ButtonMenuItemWithElemAfter,
-	ButtonMenuItemWithElemAfterAndActionsOnHover,
-	ButtonMenuItemWithPopup,
-} from '../../../../../examples/button-menu-item';
-import {
-	LinkMenuItemExample,
-	LinkMenuItemRTLExample,
-	LinkMenuItemWithDropdownActionOpen,
-	LinkMenuItemWithElemAfter,
-	LinkMenuItemWithElemAfterAndActionsOnHover,
-} from '../../../../../examples/link-menu-item';
-import { MenuItemAvatarExample } from '../../../../../examples/menu-item-avatar';
-import { LinkMenuItemBleed } from '../../../../../examples/menu-item-focus-ring-bleed';
-import { MenuItemNarrowVR } from '../../../../../examples/menu-item-narrow';
-
-// Adding all browser variants to ensure that the grid is working correctly
-// for all browsers (as we have had some issues relating to browser specific issues).
-// Using function due to ordering issues in the generated test file.
-function workaround(): SnapshotTestOptions<Hooks>['variants'] {
-	return [
-		{
-			environment: { colorScheme: 'light' },
-			name: 'desktop-chrome',
-			device: Device.DESKTOP_CHROME,
-		},
-		{
-			environment: { colorScheme: 'light' },
-			name: 'desktop-webkit',
-			device: Device.DESKTOP_WEBKIT,
-		},
-		{
-			environment: { colorScheme: 'light' },
-			name: 'desktop-firefox',
-			device: Device.DESKTOP_FIREFOX,
-		},
-	];
-}
-
-snapshot(ButtonMenuItemExample, {
-	variants: workaround(),
-});
-snapshot(LinkMenuItemExample, {
-	variants: workaround(),
-});
-snapshot(ButtonMenuItemRTLExample, {
-	variants: workaround(),
-});
-snapshot(LinkMenuItemRTLExample, {
-	variants: workaround(),
-});
-snapshot(ButtonMenuItemWithPopup, {
-	variants: workaround(),
-	drawsOutsideBounds: true,
-});
-snapshot(MenuItemAvatarExample, {
-	variants: workaround(),
-});
-snapshot(LinkMenuItemBleed, {
-	variants: workaround(),
-});
-
-snapshot(ButtonMenuItemWithElemAfter, {
-	// We expect the elemAfter to still be visible when hovered
-	description: 'Button menu item with elem after and hovered',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'With elemAfter',
-				},
-			},
-		},
-	],
-});
-snapshot(LinkMenuItemWithElemAfter, {
-	// We expect the elemAfter to still be visible when hovered
-	description: 'Link menu item with elem after and hovered',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'link',
-				options: {
-					name: 'With elemAfter',
-				},
-			},
-		},
-	],
-});
-
-// Separate snapshots created for focused and hovered states, as Gemini only creates
-// a snapshot for the first state variant in the array.
-snapshot(ButtonMenuItemWithElemAfterAndActionsOnHover, {
-	// We expect the elemAfter to not be visible, as it contains actionsOnHover
-	description: 'Button menu item with actions on hover appearing on hover',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'With elemAfter and actionsOnHover',
-				},
-			},
-		},
-	],
-});
-
-snapshot(ButtonMenuItemWithElemAfterAndActionsOnHover, {
-	// We expect the elemAfter to not be visible, as it contains actionsOnHover
-	description: 'Button menu item with actions on hover appearing on focus',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'button',
-				options: {
-					name: 'With elemAfter and actionsOnHover',
-				},
-			},
-		},
-	],
-});
-
-snapshot(LinkMenuItemWithElemAfterAndActionsOnHover, {
-	// We expect the elemAfter to not be visible, as it contains actionsOnHover
-	description: 'Link menu item with actions on hover appearing on hover',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'link',
-				options: {
-					name: 'With elemAfter and actionsOnHover',
-				},
-			},
-		},
-	],
-});
-
-snapshot(LinkMenuItemWithElemAfterAndActionsOnHover, {
-	// We expect the elemAfter to not be visible, as it contains actionsOnHover
-	description: 'Link menu item with actions on hover appearing on focus',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: {
-				byRole: 'link',
-				options: {
-					name: 'With elemAfter and actionsOnHover',
-				},
-			},
-		},
-	],
-});
-
-snapshot(ButtonMenuItemWithDropdownActionOpen, {
-	description: 'Button menu item - with dropdown action open',
-	variants: workaround(),
-	drawsOutsideBounds: true,
-});
-
-snapshot(LinkMenuItemWithDropdownActionOpen, {
-	description: 'Link menu item - with dropdown action open',
-	variants: workaround(),
-	drawsOutsideBounds: true,
-});
-
-snapshot(MenuItemNarrowVR, {
-	description: 'Menu items in a narrow container',
-	variants: workaround(),
-});
-
-snapshot(ButtonMenuItemDisabled, {
-	description: 'Button menu item - disabled',
-	variants: workaround(),
-});
-
-snapshot(ButtonMenuItemDisabled, {
-	description: 'Button menu item - disabled - hovered',
-	variants: workaround(),
-	states: [
-		{
-			state: 'hovered',
-			selector: { byRole: 'button', options: { name: 'Disabled' } },
-		},
-	],
-});
-
-// Asserting that `actions` and `actionsOnHover` are not rendered when the item is disabled
-snapshot(ButtonMenuItemDisabledWithActions, {
-	description: 'Button menu item - disabled with actions',
-	variants: workaround(),
-});

package/src/ui/menu-item/__tests__/vr-tests/top-level-spacer.vr.tsx

@@ -1,17 +0,0 @@
-import { type Hooks, snapshot, type SnapshotTestOptions } from '@af/visual-regression';
-
-import { TopLevelSpacerExample } from '../../../../../examples/top-level-spacer';
-
-const lightModeVariant: SnapshotTestOptions<Hooks>['variants'] = [
-	{
-		environment: { colorScheme: 'light' },
-		name: 'default',
-	},
-];
-
-snapshot(TopLevelSpacerExample, {
-	variants: lightModeVariant,
-	featureFlags: {
-		'platform-visual-refresh-icons': true,
-	},
-});

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

@@ -1,87 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import { MenuItemBase } from './menu-item';
-import { MenuListItem } from './menu-list-item';
-import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
-
-/**
- * We intentionally do not support the `isSelected` prop (which other menu item components
- * support) because `ButtonMenuItem`s do not correspond to a "page", so can't be navigated
- *  to and become in a selected state.
- */
-export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
-	/**
-	 * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
-	 * props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
-	 * types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
-	 * variable is passed to `isDisabled`.
-	 */
-	/**
-	 * Whether the menu item is disabled.
-	 *
-	 * When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
-	 *
-	 * The menu item will not be interactive and will not respond to hover or focus.
-	 */
-	isDisabled?: boolean;
-
-	/**
-	 * Called when the user has clicked on the trigger content.
-	 */
-	onClick?: MenuItemOnClick<HTMLButtonElement>;
-};
-
-/**
- * __ButtonMenuItem__
- *
- * A menu item button. It should be used within a `ul`, as it renders a list item.
- */
-export const ButtonMenuItem = forwardRef<HTMLButtonElement, ButtonMenuItemProps>(
-	(
-		{
-			testId,
-			actions,
-			children,
-			description,
-			elemAfter,
-			isDisabled,
-			elemBefore,
-			actionsOnHover,
-			onClick,
-			interactionName,
-			isContentTooltipDisabled,
-			visualContentRef,
-			listItemRef,
-			isDragging,
-			hasDragIndicator,
-			dropIndicator,
-		},
-		forwardedRef,
-	) => (
-		<MenuListItem ref={listItemRef}>
-			<MenuItemBase
-				testId={testId}
-				description={description}
-				elemAfter={elemAfter}
-				elemBefore={elemBefore}
-				isDisabled={isDisabled}
-				/**
-				 * Not passing `actions` and `actionsOnHover` to MenuItemBase when `isDisabled`,
-				 * so they aren't rendered in the disabled state.
-				 */
-				actions={isDisabled ? undefined : actions}
-				actionsOnHover={isDisabled ? undefined : actionsOnHover}
-				onClick={onClick}
-				ref={forwardedRef}
-				visualContentRef={visualContentRef}
-				interactionName={interactionName}
-				isContentTooltipDisabled={isContentTooltipDisabled}
-				isDragging={isDragging}
-				hasDragIndicator={hasDragIndicator}
-				dropIndicator={dropIndicator}
-			>
-				{children}
-			</MenuItemBase>
-		</MenuListItem>
-	),
-);

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

@@ -1,15 +0,0 @@
-/**
- * _Internally_ shared value for the menu item indentation. Used in:
- * - Expandable menu item content, to add padding for each expandable level
- * - The base menu item, to set the negative inset to extend the clickable area of nested menu items
- * to the root level menu items.
- *
- * Internal to the package only. Should not be exported from the package.
- *
- * Note: We're unable to use a token() call here, as Compiled complains about function calls in imported
- * values - it requires statically defined values only.
- *
- * @private
- * @internal
- */
-export const expandableMenuItemIndentation = '12px';

package/src/ui/menu-item/container-avatar.tsx

@@ -1,39 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@compiled/react';
-
-import { cssMap } from '@atlaskit/css';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	root: {
-		boxSizing: 'border-box',
-		height: '20px',
-		width: '20px',
-		borderRadius: token('border.radius.100'),
-	},
-});
-
-export type ContainerAvatarProps = {
-	/**
-	 * The source of the avatar image.
-	 */
-	src: string;
-};
-
-/**
- * __Container avatar__
- *
- * This component has been introduced specifically for the Nav4 sidebar because the existing Avatar component
- * did not offer the correct sizes to align with the designs. It was necessary to create a new component rather than
- * using the ADS image component because that did not allow the ability to set the border and radius and the desired
- * presentation was not achievable through nesting within another styled component. At some point this component maybe
- * removed if the Avatar component is updated to allow for the desired presentation.
- *
- * A container avatar to be used in sidebar navigation items.
- */
-export const ContainerAvatar = ({ src }: ContainerAvatarProps) => (
-	<img src={src} css={styles.root} alt="" />
-);