@wordpress/interface 5.25.1-next.79a6196f.0 → 5.27.0

package/src/components/preferences-modal-tabs/index.js

@@ -1,156 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalTruncate as Truncate,
-	FlexItem,
-	TabPanel,
-	Card,
-	CardHeader,
-	CardBody,
-} from '@wordpress/components';
-import { useMemo, useCallback, useState } from '@wordpress/element';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
-import { isRTL, __ } from '@wordpress/i18n';
-
-const PREFERENCES_MENU = 'preferences-menu';
-
-export default function PreferencesModalTabs( { sections } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	// This is also used to sync the two different rendered components
-	// between small and large viewports.
-	const [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );
-	/**
-	 * Create helper objects from `sections` for easier data handling.
-	 * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
-	 * is used for easier access to active tab's content.
-	 */
-	const { tabs, sectionsContentMap } = useMemo( () => {
-		let mappedTabs = {
-			tabs: [],
-			sectionsContentMap: {},
-		};
-		if ( sections.length ) {
-			mappedTabs = sections.reduce(
-				( accumulator, { name, tabLabel: title, content } ) => {
-					accumulator.tabs.push( { name, title } );
-					accumulator.sectionsContentMap[ name ] = content;
-					return accumulator;
-				},
-				{ tabs: [], sectionsContentMap: {} }
-			);
-		}
-		return mappedTabs;
-	}, [ sections ] );
-
-	const getCurrentTab = useCallback(
-		( tab ) => sectionsContentMap[ tab.name ] || null,
-		[ sectionsContentMap ]
-	);
-
-	let modalContent;
-	// We render different components based on the viewport size.
-	if ( isLargeViewport ) {
-		modalContent = (
-			<TabPanel
-				className="interface-preferences__tabs"
-				tabs={ tabs }
-				initialTabName={
-					activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
-				}
-				onSelect={ setActiveMenu }
-				orientation="vertical"
-			>
-				{ getCurrentTab }
-			</TabPanel>
-		);
-	} else {
-		modalContent = (
-			<NavigatorProvider
-				initialPath="/"
-				className="interface-preferences__provider"
-			>
-				<NavigatorScreen path="/">
-					<Card isBorderless size="small">
-						<CardBody>
-							<ItemGroup>
-								{ tabs.map( ( tab ) => {
-									return (
-										<NavigatorButton
-											key={ tab.name }
-											path={ tab.name }
-											as={ Item }
-											isAction
-										>
-											<HStack justify="space-between">
-												<FlexItem>
-													<Truncate>
-														{ tab.title }
-													</Truncate>
-												</FlexItem>
-												<FlexItem>
-													<Icon
-														icon={
-															isRTL()
-																? chevronLeft
-																: chevronRight
-														}
-													/>
-												</FlexItem>
-											</HStack>
-										</NavigatorButton>
-									);
-								} ) }
-							</ItemGroup>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				{ sections.length &&
-					sections.map( ( section ) => {
-						return (
-							<NavigatorScreen
-								key={ `${ section.name }-menu` }
-								path={ section.name }
-							>
-								<Card isBorderless size="large">
-									<CardHeader
-										isBorderless={ false }
-										justify="left"
-										size="small"
-										gap="6"
-									>
-										<NavigatorBackButton
-											icon={
-												isRTL()
-													? chevronRight
-													: chevronLeft
-											}
-											aria-label={ __(
-												'Navigate to the previous view'
-											) }
-										/>
-										<Text size="16">
-											{ section.tabLabel }
-										</Text>
-									</CardHeader>
-									<CardBody>{ section.content }</CardBody>
-								</Card>
-							</NavigatorScreen>
-						);
-					} ) }
-			</NavigatorProvider>
-		);
-	}
-
-	return modalContent;
-}

package/src/components/preferences-modal-tabs/style.scss

@@ -1,49 +0,0 @@
-$vertical-tabs-width: 160px;
-
-.interface-preferences__tabs {
-	.components-tab-panel__tabs {
-		position: absolute;
-		top: $header-height + $grid-unit-30;
-		// Aligns button text instead of button box.
-		left: $grid-unit-20;
-		width: $vertical-tabs-width;
-
-		.components-tab-panel__tabs-item {
-			border-radius: $radius-block-ui;
-			font-weight: 400;
-
-			&.is-active {
-				background: $gray-100;
-				box-shadow: none;
-				font-weight: 500;
-			}
-
-			&.is-active::after {
-				content: none;
-			}
-
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				// Windows high contrast mode.
-				outline: 2px solid transparent;
-			}
-
-			&:focus-visible::before {
-				content: none;
-			}
-		}
-	}
-
-	.components-tab-panel__tab-content {
-		padding-left: $grid-unit-30;
-		margin-left: $vertical-tabs-width;
-	}
-}
-
-@media (max-width: #{ ($break-medium - 1) }) {
-	// Keep the navigator component from overflowing the modal content area
-	// to ensure that sticky position elements stick where intended.
-	.interface-preferences__provider {
-		height: 100%;
-	}
-}