@wordpress/components 33.1.1-next.v.202605131032.0 → 34.0.0

package/src/navigation/context.tsx

@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ROOT_MENU } from './constants';
-
-import type { NavigationContext as NavigationContextType } from './types';
-
-const noop = () => {};
-const defaultIsEmpty = () => false;
-const defaultGetter = () => undefined;
-
-export const NavigationContext = createContext< NavigationContextType >( {
-	activeItem: undefined,
-	activeMenu: ROOT_MENU,
-	setActiveMenu: noop,
-
-	navigationTree: {
-		items: {},
-		getItem: defaultGetter,
-		addItem: noop,
-		removeItem: noop,
-
-		menus: {},
-		getMenu: defaultGetter,
-		addMenu: noop,
-		removeMenu: noop,
-		childMenu: {},
-		traverseMenu: noop,
-		isMenuEmpty: defaultIsEmpty,
-	},
-} );
-
-NavigationContext.displayName = 'NavigationContext';
-
-export const useNavigationContext = () => useContext( NavigationContext );

package/src/navigation/group/context.tsx

@@ -1,16 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { NavigationGroupContext as NavigationGroupContextType } from '../types';
-
-export const NavigationGroupContext =
-	createContext< NavigationGroupContextType >( { group: undefined } );
-NavigationGroupContext.displayName = 'NavigationGroupContext';
-
-export const useNavigationGroupContext = () =>
-	useContext( NavigationGroupContext );

package/src/navigation/group/index.tsx

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { NavigationGroupContext } from './context';
-import { GroupTitleUI } from '../styles/navigation-styles';
-import { useNavigationContext } from '../context';
-
-import type { NavigationGroupProps } from '../types';
-
-let uniqueId = 0;
-
-/**
- * @deprecated Use `Navigator` instead.
- */
-export function NavigationGroup( {
-	children,
-	className,
-	title,
-}: NavigationGroupProps ) {
-	const [ groupId ] = useState( `group-${ ++uniqueId }` );
-	const {
-		navigationTree: { items },
-	} = useNavigationContext();
-
-	const context = { group: groupId };
-
-	// Keep the children rendered to make sure invisible items are included in the navigation tree.
-	if (
-		! Object.values( items ).some(
-			( item ) => item.group === groupId && item._isVisible
-		)
-	) {
-		return (
-			<NavigationGroupContext.Provider value={ context }>
-				{ children }
-			</NavigationGroupContext.Provider>
-		);
-	}
-
-	const groupTitleId = `components-navigation__group-title-${ groupId }`;
-	const classes = clsx( 'components-navigation__group', className );
-
-	return (
-		<NavigationGroupContext.Provider value={ context }>
-			<li className={ classes }>
-				{ title && (
-					<GroupTitleUI
-						className="components-navigation__group-title"
-						id={ groupTitleId }
-						level={ 3 }
-					>
-						{ title }
-					</GroupTitleUI>
-				) }
-				<ul aria-labelledby={ groupTitleId } role="group">
-					{ children }
-				</ul>
-			</li>
-		</NavigationGroupContext.Provider>
-	);
-}
-
-export default NavigationGroup;

package/src/navigation/index.tsx

@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getAnimateClassName } from '../animate';
-import { ROOT_MENU } from './constants';
-import { NavigationContext } from './context';
-import { NavigationUI } from './styles/navigation-styles';
-import { useCreateNavigationTree } from './use-create-navigation-tree';
-
-import type {
-	NavigationProps,
-	NavigationContext as NavigationContextType,
-} from './types';
-
-const noop = () => {};
-
-/**
- * Render a navigation list with optional groupings and hierarchy.
- *
- * @deprecated Use `Navigator` instead.
- *
- * ```jsx
- * import {
- *   __experimentalNavigation as Navigation,
- *   __experimentalNavigationGroup as NavigationGroup,
- *   __experimentalNavigationItem as NavigationItem,
- *   __experimentalNavigationMenu as NavigationMenu,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <Navigation>
- *     <NavigationMenu title="Home">
- *       <NavigationGroup title="Group 1">
- *         <NavigationItem item="item-1" title="Item 1" />
- *         <NavigationItem item="item-2" title="Item 2" />
- *       </NavigationGroup>
- *       <NavigationGroup title="Group 2">
- *         <NavigationItem
- *           item="item-3"
- *           navigateToMenu="category"
- *           title="Category"
- *         />
- *       </NavigationGroup>
- *     </NavigationMenu>
- *
- *     <NavigationMenu
- *       backButtonLabel="Home"
- *       menu="category"
- *       parentMenu="root"
- *       title="Category"
- *     >
- *       <NavigationItem badge="1" item="child-1" title="Child 1" />
- *       <NavigationItem item="child-2" title="Child 2" />
- *     </NavigationMenu>
- *   </Navigation>
- * );
- * ```
- */
-export function Navigation( {
-	activeItem,
-	activeMenu = ROOT_MENU,
-	children,
-	className,
-	onActivateMenu = noop,
-}: NavigationProps ) {
-	const [ menu, setMenu ] = useState( activeMenu );
-	const [ slideOrigin, setSlideOrigin ] = useState< 'left' | 'right' >();
-	const navigationTree = useCreateNavigationTree();
-	const defaultSlideOrigin = isRTL() ? 'right' : 'left';
-
-	deprecated( 'wp.components.Navigation (and all subcomponents)', {
-		since: '6.8',
-		version: '7.1',
-		alternative: 'wp.components.Navigator',
-	} );
-
-	const setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (
-		menuId,
-		slideInOrigin = defaultSlideOrigin
-	) => {
-		if ( ! navigationTree.getMenu( menuId ) ) {
-			return;
-		}
-
-		setSlideOrigin( slideInOrigin );
-		setMenu( menuId );
-		onActivateMenu( menuId );
-	};
-
-	// Used to prevent the sliding animation on mount
-	const isMountedRef = useRef( false );
-	useEffect( () => {
-		if ( ! isMountedRef.current ) {
-			isMountedRef.current = true;
-		}
-	}, [] );
-
-	useEffect( () => {
-		if ( activeMenu !== menu ) {
-			setActiveMenu( activeMenu );
-		}
-		// Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
-		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
-	}, [ activeMenu ] );
-
-	const context = {
-		activeItem,
-		activeMenu: menu,
-		setActiveMenu,
-		navigationTree,
-	};
-
-	const classes = clsx( 'components-navigation', className );
-	const animateClassName = getAnimateClassName( {
-		type: 'slide-in',
-		origin: slideOrigin,
-	} );
-
-	return (
-		<NavigationUI className={ classes }>
-			<div
-				key={ menu }
-				className={
-					animateClassName
-						? clsx( {
-								[ animateClassName ]:
-									isMountedRef.current && slideOrigin,
-						  } )
-						: undefined
-				}
-			>
-				<NavigationContext.Provider value={ context }>
-					{ children }
-				</NavigationContext.Provider>
-			</div>
-		</NavigationUI>
-	);
-}
-
-export default Navigation;

package/src/navigation/item/base-content.tsx

@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
-
-import type { NavigationItemBaseContentProps } from '../types';
-
-export default function NavigationItemBaseContent(
-	props: NavigationItemBaseContentProps
-) {
-	const { badge, title } = props;
-
-	return (
-		<>
-			{ title && (
-				<ItemTitleUI
-					className="components-navigation__item-title"
-					as="span"
-				>
-					{ title }
-				</ItemTitleUI>
-			) }
-
-			{ badge && (
-				<ItemBadgeUI className="components-navigation__item-badge">
-					{ badge }
-				</ItemBadgeUI>
-			) }
-		</>
-	);
-}

package/src/navigation/item/base.tsx

@@ -1,42 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { useNavigationTreeItem } from './use-navigation-tree-item';
-import { ItemBaseUI } from '../styles/navigation-styles';
-
-import type { NavigationItemBaseProps } from '../types';
-
-let uniqueId = 0;
-
-export default function NavigationItemBase( props: NavigationItemBaseProps ) {
-	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
-	const { children, className, title, href, ...restProps } = props;
-
-	const [ itemId ] = useState( `item-${ ++uniqueId }` );
-
-	useNavigationTreeItem( itemId, props );
-	const { navigationTree } = useNavigationContext();
-
-	if ( ! navigationTree.getItem( itemId )?._isVisible ) {
-		return null;
-	}
-
-	const classes = clsx( 'components-navigation__item', className );
-
-	return (
-		<ItemBaseUI className={ classes } { ...restProps }>
-			{ children }
-		</ItemBaseUI>
-	);
-}

package/src/navigation/item/index.tsx

@@ -1,112 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { useNavigationContext } from '../context';
-import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
-import NavigationItemBaseContent from './base-content';
-import NavigationItemBase from './base';
-
-import type { NavigationItemProps } from '../types';
-
-const noop = () => {};
-
-/**
- * @deprecated Use `Navigator` instead.
- */
-export function NavigationItem( props: NavigationItemProps ) {
-	const {
-		badge,
-		children,
-		className,
-		href,
-		item,
-		navigateToMenu,
-		onClick = noop,
-		title,
-		icon,
-		hideIfTargetMenuEmpty,
-		isText,
-		...restProps
-	} = props;
-
-	const {
-		activeItem,
-		setActiveMenu,
-		navigationTree: { isMenuEmpty },
-	} = useNavigationContext();
-
-	// If hideIfTargetMenuEmpty prop is true
-	// And the menu we are supposed to navigate to
-	// Is marked as empty, then we skip rendering the item.
-	if (
-		hideIfTargetMenuEmpty &&
-		navigateToMenu &&
-		isMenuEmpty( navigateToMenu )
-	) {
-		return null;
-	}
-
-	const isActive = item && activeItem === item;
-
-	const classes = clsx( className, {
-		'is-active': isActive,
-	} );
-
-	const onItemClick: React.MouseEventHandler<
-		HTMLButtonElement | HTMLAnchorElement
-	> = ( event ) => {
-		if ( navigateToMenu ) {
-			setActiveMenu( navigateToMenu );
-		}
-
-		onClick( event );
-	};
-	const navigationIcon = isRTL() ? chevronLeft : chevronRight;
-	const baseProps = children ? props : { ...props, onClick: undefined };
-	const itemProps = isText
-		? restProps
-		: {
-				as: Button,
-				__next40pxDefaultSize:
-					'as' in restProps ? restProps.as === undefined : true,
-				href,
-				onClick: onItemClick,
-				'aria-current': isActive ? 'page' : undefined,
-				...restProps,
-		  };
-
-	return (
-		<NavigationItemBase { ...baseProps } className={ classes }>
-			{ children || (
-				<ItemUI { ...itemProps }>
-					{ icon && (
-						<ItemIconUI>
-							<Icon icon={ icon } />
-						</ItemIconUI>
-					) }
-
-					<NavigationItemBaseContent
-						title={ title }
-						badge={ badge }
-					/>
-
-					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
-				</ItemUI>
-			) }
-		</NavigationItemBase>
-	);
-}
-
-export default NavigationItem;

package/src/navigation/item/use-navigation-tree-item.tsx

@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { useNavigationGroupContext } from '../group/context';
-import { useNavigationMenuContext } from '../menu/context';
-import { normalizedSearch } from '../utils';
-
-import type { NavigationItemProps } from '../types';
-
-export const useNavigationTreeItem = (
-	itemId: string,
-	props: NavigationItemProps
-) => {
-	const {
-		activeMenu,
-		navigationTree: { addItem, removeItem },
-	} = useNavigationContext();
-	const { group } = useNavigationGroupContext();
-	const { menu, search } = useNavigationMenuContext();
-
-	useEffect( () => {
-		const isMenuActive = activeMenu === menu;
-		const isItemVisible =
-			! search ||
-			( props.title !== undefined &&
-				normalizedSearch( props.title, search ) );
-
-		addItem( itemId, {
-			...props,
-			group,
-			menu,
-			_isVisible: isMenuActive && isItemVisible,
-		} );
-
-		return () => {
-			removeItem( itemId );
-		};
-		// Not adding deps for now, as it would require either a larger refactor.
-		// See https://github.com/WordPress/gutenberg/pull/41639
-	}, [ activeMenu, search ] );
-};

package/src/navigation/menu/context.tsx

@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { NavigationMenuContext as NavigationMenuContextType } from '../types';
-
-export const NavigationMenuContext = createContext< NavigationMenuContextType >(
-	{
-		menu: undefined,
-		search: '',
-	}
-);
-NavigationMenuContext.displayName = 'NavigationMenuContext';
-
-export const useNavigationMenuContext = () =>
-	useContext( NavigationMenuContext );

package/src/navigation/menu/index.tsx

@@ -1,105 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ROOT_MENU } from '../constants';
-import { NavigationMenuContext } from './context';
-import { useNavigationContext } from '../context';
-import { useNavigationTreeMenu } from './use-navigation-tree-menu';
-import NavigationBackButton from '../back-button';
-import NavigationMenuTitle from './menu-title';
-import NavigationSearchNoResultsFound from './search-no-results-found';
-import { NavigableMenu } from '../../navigable-container';
-import { MenuUI } from '../styles/navigation-styles';
-
-import type { NavigationMenuProps } from '../types';
-
-/**
- * @deprecated Use `Navigator` instead.
- */
-export function NavigationMenu( props: NavigationMenuProps ) {
-	const {
-		backButtonLabel,
-		children,
-		className,
-		hasSearch,
-		menu = ROOT_MENU,
-		onBackButtonClick,
-		onSearch: setControlledSearch,
-		parentMenu,
-		search: controlledSearch,
-		isSearchDebouncing,
-		title,
-		titleAction,
-	} = props;
-	const [ uncontrolledSearch, setUncontrolledSearch ] = useState( '' );
-	useNavigationTreeMenu( props );
-	const { activeMenu } = useNavigationContext();
-
-	const context = {
-		menu,
-		search: uncontrolledSearch,
-	};
-
-	// Keep the children rendered to make sure invisible items are included in the navigation tree.
-	if ( activeMenu !== menu ) {
-		return (
-			<NavigationMenuContext.Provider value={ context }>
-				{ children }
-			</NavigationMenuContext.Provider>
-		);
-	}
-
-	const isControlledSearch = !! setControlledSearch;
-	const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
-	const onSearch = isControlledSearch
-		? setControlledSearch
-		: setUncontrolledSearch;
-
-	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	const classes = clsx( 'components-navigation__menu', className );
-
-	return (
-		<NavigationMenuContext.Provider value={ context }>
-			<MenuUI className={ classes }>
-				{ ( parentMenu || onBackButtonClick ) && (
-					<NavigationBackButton
-						backButtonLabel={ backButtonLabel }
-						parentMenu={ parentMenu }
-						onClick={ onBackButtonClick }
-					/>
-				) }
-
-				{ title && (
-					<NavigationMenuTitle
-						hasSearch={ hasSearch }
-						onSearch={ onSearch }
-						search={ search }
-						title={ title }
-						titleAction={ titleAction }
-					/>
-				) }
-
-				<NavigableMenu>
-					<ul aria-labelledby={ menuTitleId }>
-						{ children }
-						{ search && ! isSearchDebouncing && (
-							<NavigationSearchNoResultsFound search={ search } />
-						) }
-					</ul>
-				</NavigableMenu>
-			</MenuUI>
-		</NavigationMenuContext.Provider>
-	);
-}
-
-export default NavigationMenu;