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

package/src/navigation/menu/menu-title-search.tsx

@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import withSpokenMessages from '../../higher-order/with-spoken-messages';
-import { useNavigationMenuContext } from './context';
-import { useNavigationContext } from '../context';
-import { SEARCH_FOCUS_DELAY } from '../constants';
-
-import type { NavigationMenuTitleSearchProps } from '../types';
-import SearchControl from '../../search-control';
-import { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';
-
-function MenuTitleSearch( {
-	debouncedSpeak,
-	onCloseSearch,
-	onSearch,
-	search,
-	title,
-}: NavigationMenuTitleSearchProps ) {
-	const {
-		navigationTree: { items },
-	} = useNavigationContext();
-	const { menu } = useNavigationMenuContext();
-	const inputRef = useRef< HTMLInputElement >( null );
-
-	// Wait for the slide-in animation to complete before autofocusing the input.
-	// This prevents scrolling to the input during the animation.
-	useEffect( () => {
-		const delayedFocus = setTimeout( () => {
-			inputRef.current?.focus();
-		}, SEARCH_FOCUS_DELAY );
-
-		return () => {
-			clearTimeout( delayedFocus );
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( ! search ) {
-			return;
-		}
-
-		const count = Object.values( items ).filter(
-			( item ) => item._isVisible
-		).length;
-		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results. */
-			_n( '%d result found.', '%d results found.', count ),
-			count
-		);
-		debouncedSpeak( resultsFoundMessage );
-		// Not adding deps for now, as it would require either a larger refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44090
-	}, [ items, search ] );
-
-	const onClose = () => {
-		onSearch?.( '' );
-		onCloseSearch();
-	};
-
-	const onKeyDown: React.KeyboardEventHandler< HTMLInputElement > = (
-		event
-	) => {
-		if ( event.code === 'Escape' && ! event.defaultPrevented ) {
-			event.preventDefault();
-			onClose();
-		}
-	};
-
-	const inputId = `components-navigation__menu-title-search-${ menu }`;
-	const placeholder = sprintf(
-		/* translators: placeholder for menu search box. %s: menu title */
-		__( 'Search %s' ),
-		title?.toLowerCase() || ''
-	).trim();
-
-	return (
-		<MenuTitleSearchControlWrapper>
-			<SearchControl
-				className="components-navigation__menu-search-input"
-				id={ inputId }
-				onChange={ ( value ) => onSearch?.( value ) }
-				onKeyDown={ onKeyDown }
-				placeholder={ placeholder }
-				onClose={ onClose }
-				ref={ inputRef }
-				value={ search }
-			/>
-		</MenuTitleSearchControlWrapper>
-	);
-}
-
-export default withSpokenMessages( MenuTitleSearch );

package/src/navigation/menu/menu-title.tsx

@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, search as searchIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getAnimateClassName } from '../../animate';
-import Button from '../../button';
-import MenuTitleSearch from './menu-title-search';
-import {
-	GroupTitleUI,
-	MenuTitleActionsUI,
-	MenuTitleUI,
-} from '../styles/navigation-styles';
-import { useNavigationMenuContext } from './context';
-import { SEARCH_FOCUS_DELAY } from '../constants';
-
-import type { NavigationMenuTitleProps } from '../types';
-
-export default function NavigationMenuTitle( {
-	hasSearch,
-	onSearch,
-	search,
-	title,
-	titleAction,
-}: NavigationMenuTitleProps ) {
-	const [ isSearching, setIsSearching ] = useState( false );
-	const { menu } = useNavigationMenuContext();
-	const searchButtonRef = useRef< HTMLElement >( null );
-
-	if ( ! title ) {
-		return null;
-	}
-
-	const onCloseSearch = () => {
-		setIsSearching( false );
-
-		// Wait for the slide-in animation to complete before focusing the search button.
-		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
-		setTimeout( () => {
-			searchButtonRef.current?.focus();
-		}, SEARCH_FOCUS_DELAY );
-	};
-
-	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	/* translators: search button label for menu search box. %s: menu title */
-	const searchButtonLabel = sprintf( __( 'Search in %s' ), title );
-
-	return (
-		<MenuTitleUI className="components-navigation__menu-title">
-			{ ! isSearching && (
-				<GroupTitleUI
-					as="h2"
-					className="components-navigation__menu-title-heading"
-					level={ 3 }
-				>
-					<span id={ menuTitleId }>{ title }</span>
-
-					{ ( hasSearch || titleAction ) && (
-						<MenuTitleActionsUI>
-							{ titleAction }
-
-							{ hasSearch && (
-								<Button
-									size="small"
-									variant="tertiary"
-									label={ searchButtonLabel }
-									onClick={ () => setIsSearching( true ) }
-									ref={ searchButtonRef }
-								>
-									<Icon icon={ searchIcon } />
-								</Button>
-							) }
-						</MenuTitleActionsUI>
-					) }
-				</GroupTitleUI>
-			) }
-
-			{ isSearching && (
-				<div
-					className={ getAnimateClassName( {
-						type: 'slide-in',
-						origin: 'left',
-					} ) }
-				>
-					<MenuTitleSearch
-						onCloseSearch={ onCloseSearch }
-						onSearch={ onSearch }
-						search={ search }
-						title={ title }
-					/>
-				</div>
-			) }
-		</MenuTitleUI>
-	);
-}

package/src/navigation/menu/search-no-results-found.tsx

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { ItemBaseUI, ItemUI } from '../styles/navigation-styles';
-
-import type { NavigationSearchNoResultsFoundProps } from '../types';
-
-export default function NavigationSearchNoResultsFound( {
-	search,
-}: NavigationSearchNoResultsFoundProps ) {
-	const {
-		navigationTree: { items },
-	} = useNavigationContext();
-
-	const resultsCount = Object.values( items ).filter(
-		( item ) => item._isVisible
-	).length;
-
-	if ( ! search || !! resultsCount ) {
-		return null;
-	}
-
-	return (
-		<ItemBaseUI>
-			<ItemUI>{ __( 'No results found.' ) } </ItemUI>
-		</ItemBaseUI>
-	);
-}

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

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { ROOT_MENU } from '../constants';
-
-import type { NavigationMenuProps } from '../types';
-
-export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {
-	const {
-		navigationTree: { addMenu, removeMenu },
-	} = useNavigationContext();
-
-	const key = props.menu || ROOT_MENU;
-	useEffect( () => {
-		addMenu( key, { ...props, menu: key } );
-
-		return () => {
-			removeMenu( key );
-		};
-		// Not adding deps for now, as it would require either a larger refactor
-		// See https://github.com/WordPress/gutenberg/pull/44090
-	}, [] );
-};

package/src/navigation/stories/index.story.tsx

@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import type { Meta } from '@storybook/react-vite';
-import { fn } from 'storybook/test';
-
-/**
- * Internal dependencies
- */
-import { Navigation } from '..';
-import { NavigationBackButton } from '../back-button';
-import { NavigationGroup } from '../group';
-import { NavigationItem } from '../item';
-import { NavigationMenu } from '../menu';
-import { DefaultStory } from './utils/default';
-import { GroupStory } from './utils/group';
-import { ControlledStateStory } from './utils/controlled-state';
-import { SearchStory } from './utils/search';
-import { MoreExamplesStory } from './utils/more-examples';
-import { HideIfEmptyStory } from './utils/hide-if-empty';
-import './style.css';
-
-/**
- * Render a navigation list with optional groupings and hierarchy.
- *
- * This component is deprecated. Consider using `Navigator` instead.
- */
-const meta: Meta< typeof Navigation > = {
-	title: 'Components/Deprecated/Navigation',
-	id: 'components-navigation',
-	component: Navigation,
-	subcomponents: {
-		NavigationBackButton,
-		NavigationGroup,
-		NavigationItem,
-		NavigationMenu,
-	},
-	argTypes: {
-		activeItem: { control: false },
-		activeMenu: { control: false },
-		children: { control: false },
-		onActivateMenu: { control: false },
-	},
-	args: {
-		onActivateMenu: fn(),
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { canvas: { sourceState: 'shown' } },
-	},
-};
-
-export default meta;
-
-export const _default = DefaultStory.bind( {} );
-export const ControlledState = ControlledStateStory.bind( {} );
-export const Groups = GroupStory.bind( {} );
-export const Search = SearchStory.bind( {} );
-export const MoreExamples = MoreExamplesStory.bind( {} );
-export const HideIfEmpty = HideIfEmptyStory.bind( {} );

package/src/navigation/stories/style.css

@@ -1,25 +0,0 @@
-.navigation-story {
-	max-width: 300px;
-}
-
-.navigation-story__aside {
-	margin: 48px 0 0 24px;
-}
-
-.navigation-story__wordpress-icon {
-	align-items: center;
-	display: inline-flex;
-}
-.navigation-story__wordpress-icon svg {
-	fill: #949494;
-	margin-right: 8px;
-}
-
-:root[dir="rtl"] .navigation-story__wordpress-icon svg {
-	fill: #949494;
-	margin-right: 0;
-	margin-left: 8px;
-}
-.navigation-story__wordpress-icon:hover svg {
-	fill: #ddd;
-}

package/src/navigation/stories/utils/controlled-state.tsx

@@ -1,149 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../../button';
-import { Navigation } from '../..';
-import { NavigationItem } from '../../item';
-import { NavigationMenu } from '../../menu';
-
-export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
-	className,
-	...props
-} ) => {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-	const [ activeMenu, setActiveMenu ] = useState( 'root' );
-
-	// Mock navigation link.
-	const MockLink = ( {
-		href,
-		children,
-	}: {
-		href: string;
-		children: React.ReactNode;
-	} ) => (
-		<Button
-			__next40pxDefaultSize
-			href={ href }
-			// Since we're not actually navigating pages, simulate it with onClick.
-			onClick={
-				( ( event ) => {
-					event.preventDefault();
-					const item = href.replace( 'https://example.com/', '' );
-					setActiveItem( item );
-				} ) as React.MouseEventHandler< HTMLAnchorElement >
-			}
-		>
-			{ children }
-		</Button>
-	);
-
-	return (
-		<>
-			<Navigation
-				{ ...props }
-				activeItem={ activeItem }
-				activeMenu={ activeMenu }
-				className={ [ 'navigation-story', className ]
-					.filter( Boolean )
-					.join( ' ' ) }
-				onActivateMenu={ setActiveMenu }
-			>
-				<NavigationMenu title="Home">
-					<NavigationItem item="item-1" title="Item 1">
-						<MockLink href="https://example.com/item-1">
-							Item 1
-						</MockLink>
-					</NavigationItem>
-					<NavigationItem item="item-2">
-						<MockLink href="https://example.com/item-2">
-							Item 2
-						</MockLink>
-					</NavigationItem>
-					<NavigationItem
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu"
-					/>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="sub-menu"
-					parentMenu="root"
-					title="Sub-Menu"
-				>
-					<NavigationItem
-						item="child-1"
-						onClick={ () => setActiveItem( 'child-1' ) }
-						title="Child 1"
-					/>
-					<NavigationItem
-						item="child-2"
-						onClick={ () => setActiveItem( 'child-2' ) }
-						title="Child 2"
-					/>
-					<NavigationItem
-						item="child-nested-sub-menu"
-						navigateToMenu="nested-sub-menu"
-						title="Nested Sub-Menu"
-					/>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="nested-sub-menu"
-					parentMenu="sub-menu"
-					title="Nested Sub-Menu"
-				>
-					<NavigationItem
-						item="sub-child-1"
-						onClick={ () => setActiveItem( 'sub-child-1' ) }
-						title="Sub-Child 1"
-					/>
-					<NavigationItem
-						item="sub-child-2"
-						onClick={ () => setActiveItem( 'sub-child-2' ) }
-						title="Sub-Child 2"
-					/>
-				</NavigationMenu>
-			</Navigation>
-
-			<div className="navigation-story__aside">
-				<p>
-					Menu <code>{ activeMenu }</code> is active.
-					<br />
-					Item <code>{ activeItem }</code> is active.
-				</p>
-				<p>
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						onClick={ () => {
-							setActiveMenu( 'nested-sub-menu' );
-						} }
-					>
-						Open the Nested Sub-Menu menu
-					</Button>
-				</p>
-				<p>
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						onClick={ () => {
-							setActiveItem( 'child-2' );
-							setActiveMenu( 'sub-menu' );
-						} }
-					>
-						Navigate to Child 2 item
-					</Button>
-				</p>
-			</div>
-		</>
-	);
-};

package/src/navigation/stories/utils/default.tsx

@@ -1,92 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Navigation } from '../..';
-import { NavigationItem } from '../../item';
-import { NavigationMenu } from '../../menu';
-
-export const DefaultStory: StoryFn< typeof Navigation > = ( {
-	className,
-	...props
-} ) => {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-
-	return (
-		<Navigation
-			{ ...props }
-			activeItem={ activeItem }
-			className={ [ 'navigation-story', className ]
-				.filter( Boolean )
-				.join( ' ' ) }
-		>
-			<NavigationMenu title="Home">
-				<NavigationItem
-					item="item-1"
-					onClick={ () => setActiveItem( 'item-1' ) }
-					title="Item 1"
-				/>
-				<NavigationItem
-					item="item-2"
-					onClick={ () => setActiveItem( 'item-2' ) }
-					title="Item 2"
-				/>
-				<NavigationItem>
-					<a
-						className="components-button"
-						href="http://www.example.com"
-					>
-						External Link
-					</a>
-				</NavigationItem>
-				<NavigationItem
-					item="item-sub-menu"
-					navigateToMenu="sub-menu"
-					title="Sub-Menu"
-				/>
-			</NavigationMenu>
-			<NavigationMenu menu="sub-menu" parentMenu="root" title="Sub-Menu">
-				<NavigationItem
-					item="child-1"
-					onClick={ () => setActiveItem( 'child-1' ) }
-					title="Child 1"
-				/>
-				<NavigationItem
-					item="child-2"
-					onClick={ () => setActiveItem( 'child-2' ) }
-					title="Child 2"
-				/>
-				<NavigationItem
-					item="child-nested-sub-menu"
-					navigateToMenu="nested-sub-menu"
-					title="Nested Sub-Menu"
-				/>
-			</NavigationMenu>
-			<NavigationMenu
-				menu="nested-sub-menu"
-				parentMenu="sub-menu"
-				title="Nested Sub-Menu"
-			>
-				<NavigationItem
-					item="sub-child-1"
-					onClick={ () => setActiveItem( 'sub-child-1' ) }
-					title="Sub-Child 1"
-				/>
-				<NavigationItem
-					item="sub-child-2"
-					onClick={ () => setActiveItem( 'sub-child-2' ) }
-					title="Sub-Child 2"
-				/>
-			</NavigationMenu>
-		</Navigation>
-	);
-};

package/src/navigation/stories/utils/group.tsx

@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Navigation } from '../..';
-import { NavigationItem } from '../../item';
-import { NavigationMenu } from '../../menu';
-import { NavigationGroup } from '../../group';
-
-export const GroupStory: StoryFn< typeof Navigation > = ( {
-	className,
-	...props
-} ) => {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-
-	return (
-		<Navigation
-			{ ...props }
-			activeItem={ activeItem }
-			className={ [ 'navigation-story', className ]
-				.filter( Boolean )
-				.join( ' ' ) }
-		>
-			<NavigationMenu title="Home">
-				<NavigationGroup title="Group 1">
-					<NavigationItem
-						item="item-1"
-						onClick={ () => setActiveItem( 'item-1' ) }
-						title="Item 1"
-					/>
-					<NavigationItem
-						item="item-2"
-						onClick={ () => setActiveItem( 'item-2' ) }
-						title="Item 2"
-					/>
-				</NavigationGroup>
-				<NavigationGroup title="Group 2">
-					<NavigationItem
-						item="item-3"
-						onClick={ () => setActiveItem( 'item-3' ) }
-						title="Item 3"
-					/>
-					<NavigationItem
-						item="item-4"
-						onClick={ () => setActiveItem( 'item-4' ) }
-						title="Item 4"
-					/>
-				</NavigationGroup>
-			</NavigationMenu>
-		</Navigation>
-	);
-};