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

package/src/navigation/stories/utils/hide-if-empty.tsx

@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
-import { Navigation } from '../..';
-import { NavigationItem } from '../../item';
-import { NavigationMenu } from '../../menu';
-
-export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
-	className,
-	...props
-} ) => {
-	return (
-		<>
-			<Navigation
-				{ ...props }
-				className={ [ 'navigation-story', className ]
-					.filter( Boolean )
-					.join( ' ' ) }
-			>
-				<NavigationMenu title="Home" menu="root" isEmpty={ false }>
-					<NavigationItem
-						navigateToMenu="root-sub-1"
-						title="To sub 1 (hidden)"
-						hideIfTargetMenuEmpty
-					/>
-
-					<NavigationItem
-						navigateToMenu="root-sub-2"
-						title="To sub 2 (visible)"
-						hideIfTargetMenuEmpty
-					/>
-
-					<NavigationItem
-						navigateToMenu="root-sub-1-sub-1"
-						title="To sub 1-1 (hidden)"
-						hideIfTargetMenuEmpty
-					/>
-				</NavigationMenu>
-
-				<NavigationMenu menu="root-sub-1" parentMenu="root" isEmpty />
-				<NavigationMenu
-					menu="root-sub-2"
-					parentMenu="root"
-					isEmpty={ false }
-				>
-					<NavigationItem title="This menu is visible" />
-				</NavigationMenu>
-				<NavigationMenu
-					menu="root-sub-1-sub-1"
-					parentMenu="root-sub-1"
-					isEmpty
-				/>
-			</Navigation>
-
-			<p>
-				This story contains 3 navigation items and 4 menus. You should
-				only see one item: <strong>To sub 2 (visible)</strong>
-			</p>
-		</>
-	);
-};

package/src/navigation/stories/utils/more-examples.tsx

@@ -1,162 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { Icon, wordpress, home } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Navigation } from '../..';
-import { NavigationGroup } from '../../group';
-import { NavigationItem } from '../../item';
-import { NavigationMenu } from '../../menu';
-
-export const MoreExamplesStory: StoryFn< typeof Navigation > = ( {
-	className,
-	...props
-} ) => {
-	const [ activeItem, setActiveItem ] = useState( 'child-1' );
-	const [ delayedBadge, setDelayedBadge ] = useState< number | undefined >();
-	useEffect( () => {
-		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
-		return () => clearTimeout( timeout );
-	} );
-	const [ backButtonBadge, setBackButtonBadge ] = useState( 1 );
-	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] =
-		useState( 1 );
-
-	return (
-		<Navigation
-			{ ...props }
-			activeItem={ activeItem }
-			className={ [ 'navigation-story', className ]
-				.filter( Boolean )
-				.join( ' ' ) }
-		>
-			<NavigationMenu title="Home">
-				<NavigationGroup title="Items without Active State">
-					<NavigationItem item="item-1" title="Item 1" />
-					<NavigationItem item="item-2" title="Item 2" />
-				</NavigationGroup>
-				<NavigationGroup title="Items with Unusual Features">
-					<NavigationItem
-						icon={ home }
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu with Custom Back Label"
-					/>
-					<NavigationItem
-						item="item-custom-back-click-handler"
-						navigateToMenu="custom-back-click-handler-menu"
-						title="Custom Back Click Handler"
-						badge={ backButtonBadge }
-					/>
-					<NavigationItem
-						item="item-custom-back-click-handler-prevented"
-						navigateToMenu="custom-back-click-handler-prevented-menu"
-						title="Prevent back navigation"
-					/>
-					<NavigationItem
-						item="item-nonexistent-menu"
-						navigateToMenu="nonexistent-menu"
-						title="Navigate to Nonexistent Menu"
-					/>
-					<NavigationItem
-						badge={ delayedBadge }
-						item="item-delayed-badge"
-						onClick={ () => setActiveItem( 'item-delayed-badge' ) }
-						title="Item with a Delayed Badge"
-					/>
-				</NavigationGroup>
-				<NavigationGroup title="External Links">
-					<NavigationItem
-						href="https://wordpress.org/"
-						item="item-4"
-						target="_blank"
-						title="WordPress.org"
-					/>
-					<NavigationItem item="item-5">
-						{ /* eslint-disable-next-line react/jsx-no-target-blank */ }
-						<a
-							className="navigation-story__wordpress-icon"
-							href="https://wordpress.org/"
-							target="_blank"
-							rel="noopener"
-						>
-							<Icon icon={ wordpress } />
-							<em>Custom Content</em>
-						</a>
-					</NavigationItem>
-				</NavigationGroup>
-				<NavigationGroup title="Text only items">
-					<NavigationItem
-						item="item-text-only"
-						title="This is just text, doesn't have any functionality"
-						isText
-					/>
-					<NavigationItem
-						item="item-text-only-with-badge"
-						title="Text with badge"
-						badge="2"
-						isText
-					/>
-				</NavigationGroup>
-			</NavigationMenu>
-
-			<NavigationMenu
-				backButtonLabel="Custom Back Button Label"
-				menu="sub-menu"
-				parentMenu="root"
-				title="Sub-Menu with Custom Back Label"
-			>
-				<NavigationItem
-					item="child-1"
-					onClick={ () => setActiveItem( 'child-1' ) }
-					title="Child 1"
-				/>
-				<NavigationItem
-					item="child-2"
-					onClick={ () => setActiveItem( 'child-2' ) }
-					title="Child 2"
-				/>
-			</NavigationMenu>
-
-			<NavigationMenu
-				menu="custom-back-click-handler-menu"
-				title="Custom back button click handler"
-				parentMenu="root"
-				onBackButtonClick={ () =>
-					setBackButtonBadge( backButtonBadge + 1 )
-				}
-				backButtonLabel="Increment badge and go back"
-			/>
-
-			<NavigationMenu
-				menu="custom-back-click-handler-prevented-menu"
-				title="Custom back button click handler prevented"
-				parentMenu="root"
-				onBackButtonClick={
-					( ( event ) => {
-						event.preventDefault();
-						setBackButtonPreventedBadge(
-							backButtonPreventedBadge + 1
-						);
-					} ) as React.MouseEventHandler
-				}
-				backButtonLabel="Increment badge"
-			>
-				<NavigationItem
-					item="custom-back-click-prevented-child-1"
-					title="You can't go back from here"
-					badge={ backButtonPreventedBadge }
-				/>
-			</NavigationMenu>
-		</Navigation>
-	);
-};

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

@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import type { StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Navigation } from '../..';
-import { NavigationGroup } from '../../group';
-import { NavigationItem } from '../../item';
-import { NavigationMenu } from '../../menu';
-import { normalizedSearch } from '../../utils';
-
-const searchItems = [
-	{ item: 'foo', title: 'Foo' },
-	{ item: 'bar', title: 'Bar' },
-	{ item: 'baz', title: 'Baz' },
-	{ item: 'qux', title: 'Qux' },
-	{ item: 'quux', title: 'Quux' },
-	{ item: 'corge', title: 'Corge' },
-	{ item: 'grault', title: 'Grault' },
-	{ item: 'garply', title: 'Garply' },
-	{ item: 'waldo', title: 'Waldo' },
-];
-
-export const SearchStory: StoryFn< typeof Navigation > = ( {
-	className,
-	...props
-} ) => {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-	const [ search, setSearch ] = useState( '' );
-
-	return (
-		<Navigation
-			{ ...props }
-			activeItem={ activeItem }
-			className={ [ 'navigation-story', className ]
-				.filter( Boolean )
-				.join( ' ' ) }
-		>
-			<NavigationMenu hasSearch title="Home">
-				<NavigationGroup title="Items">
-					{ searchItems.map( ( { item, title } ) => (
-						<NavigationItem
-							item={ `item-${ item }` }
-							key={ `item-${ item }` }
-							onClick={ () => setActiveItem( `item-${ item }` ) }
-							title={ title }
-						/>
-					) ) }
-				</NavigationGroup>
-
-				<NavigationGroup title="More Examples">
-					<NavigationItem
-						item="item-controlled-search"
-						navigateToMenu="controlled-search"
-						title="Controlled Search"
-					/>
-				</NavigationGroup>
-			</NavigationMenu>
-
-			<NavigationMenu
-				hasSearch
-				menu="controlled-search"
-				onSearch={ ( value ) => setSearch( value ) }
-				parentMenu="root"
-				search={ search }
-				title="Controlled Search"
-			>
-				{ searchItems
-					.filter( ( { title } ) =>
-						normalizedSearch( title, search )
-					)
-					.map( ( { item, title } ) => (
-						<NavigationItem
-							item={ `child-${ item }` }
-							key={ `child-${ item }` }
-							onClick={ () => setActiveItem( `child-${ item }` ) }
-							title={ title }
-						/>
-					) ) }
-			</NavigationMenu>
-		</Navigation>
-	);
-};

package/src/navigation/styles/navigation-styles.tsx

@@ -1,197 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils/colors-values';
-import Button from '../../button';
-import { Text } from '../../text';
-import { Heading } from '../../heading';
-import { rtl, CONFIG } from '../../utils';
-import { space } from '../../utils/space';
-
-export const NavigationUI = styled.div`
-	width: 100%;
-	box-sizing: border-box;
-	padding: 0 ${ space( 4 ) };
-	overflow: hidden;
-`;
-
-export const MenuUI = styled.div`
-	margin-top: ${ space( 6 ) };
-	margin-bottom: ${ space( 6 ) };
-	display: flex;
-	flex-direction: column;
-	ul {
-		padding: 0;
-		margin: 0;
-		list-style: none;
-	}
-	.components-navigation__back-button {
-		margin-bottom: ${ space( 6 ) };
-	}
-
-	.components-navigation__group + .components-navigation__group {
-		margin-top: ${ space( 6 ) };
-	}
-`;
-
-export const MenuBackButtonUI = styled( Button )`
-	&.is-tertiary {
-		color: inherit;
-		opacity: 0.7;
-
-		&:hover:not( :disabled ) {
-			opacity: 1;
-			box-shadow: none;
-			color: inherit;
-		}
-
-		&:active:not( :disabled ) {
-			background: transparent;
-			opacity: 1;
-			color: inherit;
-		}
-	}
-`;
-
-export const MenuTitleUI = styled.div`
-	overflow: hidden;
-	width: 100%;
-`;
-
-export const MenuTitleSearchControlWrapper = styled.div`
-	margin: 11px 0; // non-ideal hardcoding to maintain same height as Heading, could be improved
-	padding: 1px; // so the focus border doesn't get cut off by the overflow hidden on MenuTitleUI
-`;
-
-export const MenuTitleActionsUI = styled.span`
-	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
-
-	.components-button.is-small {
-		color: inherit;
-		opacity: 0.7;
-		margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
-		padding: 0;
-
-		&:active:not( :disabled ) {
-			background: none;
-			opacity: 1;
-			color: inherit;
-		}
-		&:hover:not( :disabled ) {
-			box-shadow: none;
-			opacity: 1;
-			color: inherit;
-		}
-	}
-`;
-
-export const GroupTitleUI = styled( Heading )`
-	min-height: ${ space( 12 ) };
-	align-items: center;
-	color: inherit;
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: ${ space( 2 ) };
-	padding: ${ () =>
-		isRTL()
-			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`
-			: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(
-					4
-			  ) }` };
-`;
-
-export const ItemBaseUI = styled.li`
-	border-radius: ${ CONFIG.radiusSmall };
-	color: inherit;
-	margin-bottom: 0;
-
-	> button,
-	> a.components-button,
-	> a {
-		width: 100%;
-		color: inherit;
-		opacity: 0.7;
-		padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
-		${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }
-
-		&:hover,
-		&:focus:not( [aria-disabled='true'] ):active,
-		&:active:not( [aria-disabled='true'] ):active {
-			color: inherit;
-			opacity: 1;
-		}
-	}
-
-	&.is-active {
-		background-color: ${ COLORS.theme.accent };
-		color: ${ COLORS.theme.accentInverted };
-
-		> button,
-		.components-button:hover,
-		> a {
-			color: ${ COLORS.theme.accentInverted };
-			opacity: 1;
-		}
-	}
-
-	> svg path {
-		color: ${ COLORS.gray[ 600 ] };
-	}
-`;
-
-export const ItemUI = styled.div`
-	display: flex;
-	align-items: center;
-	height: auto;
-	min-height: 40px;
-	margin: 0;
-	padding: ${ space( 1.5 ) } ${ space( 4 ) };
-	font-weight: 400;
-	line-height: 20px;
-	width: 100%;
-	color: inherit;
-	opacity: 0.7;
-`;
-
-export const ItemIconUI = styled.span`
-	display: flex;
-	margin-right: ${ space( 2 ) };
-`;
-
-export const ItemBadgeUI = styled.span`
-	margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
-	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
-	display: inline-flex;
-	padding: ${ space( 1 ) } ${ space( 3 ) };
-	border-radius: ${ CONFIG.radiusSmall };
-
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@media not ( prefers-reduced-motion ) {
-		animation: fade-in 250ms ease-out;
-	}
-`;
-
-export const ItemTitleUI = styled( Text )`
-	${ () => ( isRTL() ? 'margin-left: auto;' : 'margin-right: auto;' ) }
-	font-size: 14px;
-	line-height: 20px;
-	color: inherit;
-`;