@automattic/jetpack-components 1.3.12 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.4.0] - 2025-12-08
+### Added
+- Jetpack Logo: Add support for customized title in shared component. [#46162]
+
+### Changed
+- Make `NavigatorModal` responsive using container queries. [#46102]
+
+## [1.3.13] - 2025-12-01
+### Added
+- Add NavigatorModal component. [#46101]
+
+### Changed
+- Update package dependencies. [#46143]
+
 ## [1.3.12] - 2025-11-20
 ### Changed
 - Update package dependencies. [#46022]
@@ -1569,6 +1583,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.4.0]: https://github.com/Automattic/jetpack-components/compare/1.3.13...1.4.0
+[1.3.13]: https://github.com/Automattic/jetpack-components/compare/1.3.12...1.3.13
 [1.3.12]: https://github.com/Automattic/jetpack-components/compare/1.3.11...1.3.12
 [1.3.11]: https://github.com/Automattic/jetpack-components/compare/1.3.10...1.3.11
 [1.3.10]: https://github.com/Automattic/jetpack-components/compare/1.3.9...1.3.10

package/build/components/jetpack-logo/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-const JetpackLogo = ({ logoColor = '#069e08', showText = true, className, height = 32, ...otherProps }) => {
+const JetpackLogo = ({ logoColor = '#069e08', showText = true, className, height = 32, title, ...otherProps }) => {
     const viewBox = showText ? '0 0 118 32' : '0 0 32 32';
+    const logoTitle = title ?? __('Jetpack Logo', 'jetpack-components');
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: viewBox, className: clsx('jetpack-logo', className), "aria-labelledby": "jetpack-logo-title", height: height, ...otherProps, 
         // role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
-        role: "img", children: [_jsx("title", { id: "jetpack-logo-title", children: __('Jetpack Logo', 'jetpack-components') }), _jsx("path", { fill: logoColor, d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z" }), showText && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M41.3,26.6c-0.5-0.7-0.9-1.4-1.3-2.1c2.3-1.4,3-2.5,3-4.6V8h-3V6h6v13.4C46,22.8,45,24.8,41.3,26.6z" }), _jsx("path", { d: "M65,18.4c0,1.1,0.8,1.3,1.4,1.3c0.5,0,2-0.2,2.6-0.4v2.1c-0.9,0.3-2.5,0.5-3.7,0.5c-1.5,0-3.2-0.5-3.2-3.1V12H60v-2h2.1V7.1 H65V10h4v2h-4V18.4z" }), _jsx("path", { d: "M71,10h3v1.3c1.1-0.8,1.9-1.3,3.3-1.3c2.5,0,4.5,1.8,4.5,5.6s-2.2,6.3-5.8,6.3c-0.9,0-1.3-0.1-2-0.3V28h-3V10z M76.5,12.3 c-0.8,0-1.6,0.4-2.5,1.2v5.9c0.6,0.1,0.9,0.2,1.8,0.2c2,0,3.2-1.3,3.2-3.9C79,13.4,78.1,12.3,76.5,12.3z" }), _jsx("path", { d: "M93,22h-3v-1.5c-0.9,0.7-1.9,1.5-3.5,1.5c-1.5,0-3.1-1.1-3.1-3.2c0-2.9,2.5-3.4,4.2-3.7l2.4-0.3v-0.3c0-1.5-0.5-2.3-2-2.3 c-0.7,0-2.3,0.5-3.7,1.1L84,11c1.2-0.4,3-1,4.4-1c2.7,0,4.6,1.4,4.6,4.7L93,22z M90,16.4l-2.2,0.4c-0.7,0.1-1.4,0.5-1.4,1.6 c0,0.9,0.5,1.4,1.3,1.4s1.5-0.5,2.3-1V16.4z" }), _jsx("path", { d: "M104.5,21.3c-1.1,0.4-2.2,0.6-3.5,0.6c-4.2,0-5.9-2.4-5.9-5.9c0-3.7,2.3-6,6.1-6c1.4,0,2.3,0.2,3.2,0.5V13 c-0.8-0.3-2-0.6-3.2-0.6c-1.7,0-3.2,0.9-3.2,3.6c0,2.9,1.5,3.8,3.3,3.8c0.9,0,1.9-0.2,3.2-0.7V21.3z" }), _jsx("path", { d: "M110,15.2c0.2-0.3,0.2-0.8,3.8-5.2h3.7l-4.6,5.7l5,6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z" }), _jsx("path", { d: "M58.5,21.3c-1.5,0.5-2.7,0.6-4.2,0.6c-3.6,0-5.8-1.8-5.8-6c0-3.1,1.9-5.9,5.5-5.9s4.9,2.5,4.9,4.9c0,0.8,0,1.5-0.1,2h-7.3 c0.1,2.5,1.5,2.8,3.6,2.8c1.1,0,2.2-0.3,3.4-0.7C58.5,19,58.5,21.3,58.5,21.3z M56,15c0-1.4-0.5-2.9-2-2.9c-1.4,0-2.3,1.3-2.4,2.9 C51.6,15,56,15,56,15z" })] }))] }));
+        role: "img", children: [_jsx("title", { id: "jetpack-logo-title", children: logoTitle }), _jsx("path", { fill: logoColor, d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z" }), showText && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M41.3,26.6c-0.5-0.7-0.9-1.4-1.3-2.1c2.3-1.4,3-2.5,3-4.6V8h-3V6h6v13.4C46,22.8,45,24.8,41.3,26.6z" }), _jsx("path", { d: "M65,18.4c0,1.1,0.8,1.3,1.4,1.3c0.5,0,2-0.2,2.6-0.4v2.1c-0.9,0.3-2.5,0.5-3.7,0.5c-1.5,0-3.2-0.5-3.2-3.1V12H60v-2h2.1V7.1 H65V10h4v2h-4V18.4z" }), _jsx("path", { d: "M71,10h3v1.3c1.1-0.8,1.9-1.3,3.3-1.3c2.5,0,4.5,1.8,4.5,5.6s-2.2,6.3-5.8,6.3c-0.9,0-1.3-0.1-2-0.3V28h-3V10z M76.5,12.3 c-0.8,0-1.6,0.4-2.5,1.2v5.9c0.6,0.1,0.9,0.2,1.8,0.2c2,0,3.2-1.3,3.2-3.9C79,13.4,78.1,12.3,76.5,12.3z" }), _jsx("path", { d: "M93,22h-3v-1.5c-0.9,0.7-1.9,1.5-3.5,1.5c-1.5,0-3.1-1.1-3.1-3.2c0-2.9,2.5-3.4,4.2-3.7l2.4-0.3v-0.3c0-1.5-0.5-2.3-2-2.3 c-0.7,0-2.3,0.5-3.7,1.1L84,11c1.2-0.4,3-1,4.4-1c2.7,0,4.6,1.4,4.6,4.7L93,22z M90,16.4l-2.2,0.4c-0.7,0.1-1.4,0.5-1.4,1.6 c0,0.9,0.5,1.4,1.3,1.4s1.5-0.5,2.3-1V16.4z" }), _jsx("path", { d: "M104.5,21.3c-1.1,0.4-2.2,0.6-3.5,0.6c-4.2,0-5.9-2.4-5.9-5.9c0-3.7,2.3-6,6.1-6c1.4,0,2.3,0.2,3.2,0.5V13 c-0.8-0.3-2-0.6-3.2-0.6c-1.7,0-3.2,0.9-3.2,3.6c0,2.9,1.5,3.8,3.3,3.8c0.9,0,1.9-0.2,3.2-0.7V21.3z" }), _jsx("path", { d: "M110,15.2c0.2-0.3,0.2-0.8,3.8-5.2h3.7l-4.6,5.7l5,6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z" }), _jsx("path", { d: "M58.5,21.3c-1.5,0.5-2.7,0.6-4.2,0.6c-3.6,0-5.8-1.8-5.8-6c0-3.1,1.9-5.9,5.5-5.9s4.9,2.5,4.9,4.9c0,0.8,0,1.5-0.1,2h-7.3 c0.1,2.5,1.5,2.8,3.6,2.8c1.1,0,2.2-0.3,3.4-0.7C58.5,19,58.5,21.3,58.5,21.3z M56,15c0-1.4-0.5-2.9-2-2.9c-1.4,0-2.3,1.3-2.4,2.9 C51.6,15,56,15,56,15z" })] }))] }));
 };
 export default JetpackLogo;

package/build/components/jetpack-logo/types.d.ts

@@ -4,4 +4,5 @@ export type JetpackLogoProps = {
     height?: number;
     showText?: boolean;
     logoColor?: string;
+    title?: string;
 };

package/build/components/navigator-modal/context.d.ts

@@ -0,0 +1,2 @@
+import type { TNavigatorModalContext } from './types.ts';
+export declare const NavigatorModalContext: import("react").Context<TNavigatorModalContext>;

package/build/components/navigator-modal/context.js

@@ -0,0 +1,6 @@
+import { createContext } from '@wordpress/element';
+const initialContextValue = {
+    onClose: () => { },
+};
+export const NavigatorModalContext = createContext(initialContextValue);
+NavigatorModalContext.displayName = 'NavigatorModalContext';

package/build/components/navigator-modal/footer.d.ts

@@ -0,0 +1,14 @@
+import { Button } from '@wordpress/components';
+import { SharedProps } from './types.ts';
+export type FooterProps = SharedProps & {
+    actions?: Array<React.ComponentProps<typeof Button>>;
+    isScreenLocked?: boolean;
+};
+/**
+ * Renders a footer.
+ *
+ * @param {FooterProps} props - Props
+ *
+ * @return The rendered footer.
+ */
+export declare function Footer({ children, actions, isScreenLocked }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/build/components/navigator-modal/footer.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
+import { useContext } from 'react';
+import { NavigatorModalContext } from "./context.js";
+import styles from './styles.module.scss';
+/**
+ * Renders a footer.
+ *
+ * @param {FooterProps} props - Props
+ *
+ * @return The rendered footer.
+ */
+export function Footer({ children, actions, isScreenLocked }) {
+    const navigator = useNavigator();
+    const context = useContext(NavigatorModalContext);
+    return (_jsxs(Flex, { className: styles.footer, children: [_jsx(FlexBlock, { children: children }), actions ? (_jsx(FlexItem, { children: _jsx(Flex, { children: actions.map(({ onClick, ...actionProps }, index) => (_jsx(Button
+                    // eslint-disable-next-line react/jsx-no-bind
+                    , { 
+                        // eslint-disable-next-line react/jsx-no-bind
+                        onClick: event => {
+                            onClick?.(event);
+                            if (!isScreenLocked) {
+                                navigator.goBack();
+                            }
+                            else {
+                                context.onClose?.();
+                            }
+                        }, ...actionProps }, index))) }) })) : null] }));
+}

package/build/components/navigator-modal/header.d.ts

@@ -0,0 +1,17 @@
+export type HeaderProps = {
+    /**
+     * The title of the header.
+     */
+    title: string;
+    /**
+     * Whether the screen is locked, in which case to hide the back button.
+     */
+    isScreenLocked?: boolean;
+};
+/**
+ * Renders a header for the NavigatorModal.
+ * @param {HeaderProps} props - Props
+ *
+ * @return component
+ */
+export declare function Header({ title, isScreenLocked }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/build/components/navigator-modal/header.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, useNavigator } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight, close } from '@wordpress/icons';
+import { useCallback, useContext } from 'react';
+import { NavigatorModalContext } from "./context.js";
+import styles from './styles.module.scss';
+/**
+ * Renders a header for the NavigatorModal.
+ * @param {HeaderProps} props - Props
+ *
+ * @return component
+ */
+export function Header({ title, isScreenLocked }) {
+    const context = useContext(NavigatorModalContext);
+    const navigator = useNavigator();
+    const onGoBack = useCallback(() => {
+        navigator.goBack();
+    }, [navigator]);
+    return (_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles['title-wrap'], children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
+}

package/build/components/navigator-modal/index.d.ts

@@ -0,0 +1,16 @@
+import { Screen } from './screen.tsx';
+import { TNavigatorModalContext, SharedProps } from './types.ts';
+/**
+ * Renders a modal with navigator capabilities.
+ *
+ * @param {SharedProps & TNavigatorModalContext} props - Props
+ *
+ * @return Component
+ */
+declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, }: SharedProps & TNavigatorModalContext): import("react/jsx-runtime").JSX.Element;
+export declare const NavigatorModal: typeof NavigatorModalMain & {
+    Screen: typeof Screen & {
+        displayName: string;
+    };
+};
+export {};

package/build/components/navigator-modal/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { NavigatorModalContext } from "./context.js";
+import { Screen } from "./screen.js";
+import styles from './styles.module.scss';
+/**
+ * Renders the internal NavigatorModal component.
+ *
+ * @param { SharedProps } props - Props
+ *
+ * @return Component
+ */
+function InternalNavigatorModal({ children, className }) {
+    const context = useContext(NavigatorModalContext);
+    return (_jsx(Modal, { __experimentalHideHeader: true, onRequestClose: context.onClose, className: clsx(styles.modal, className), children: _jsx(Navigator, { initialPath: context.initialPath, className: styles.navigator, children: children }) }));
+}
+/**
+ * Renders a modal with navigator capabilities.
+ *
+ * @param {SharedProps & TNavigatorModalContext} props - Props
+ *
+ * @return Component
+ */
+function NavigatorModalMain({ children, className, initialPath = '/', onClose, isDismissible = true, }) {
+    return (_jsx(NavigatorModalContext.Provider, { value: { onClose, initialPath, isDismissible }, children: _jsx(InternalNavigatorModal, { className: className, children: children }) }));
+}
+export const NavigatorModal = Object.assign(NavigatorModalMain, {
+    Screen: Object.assign(Screen, {
+        displayName: 'NavigatorModal.Screen',
+    }),
+});

package/build/components/navigator-modal/screen.d.ts

@@ -0,0 +1,51 @@
+import { FooterProps } from './footer.tsx';
+export type ScreenProps = {
+    /**
+     * The title of the screen.
+     */
+    title?: string;
+    /**
+     * The path of the screen.
+     */
+    path: string;
+    /**
+     * The sidebar content
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * Whether the screen is locked or has a parent screen.
+     *
+     * When it's locked, it means there will be no navigation back to a previous screen.
+     */
+    isScreenLocked?: boolean;
+    /**
+     * The footer content
+     */
+    footerContent?: React.ReactNode;
+    /**
+     * The footer actions
+     */
+    footerActions?: FooterProps['actions'];
+    /**
+     * className to be applied to the modal.
+     */
+    className?: string;
+} & ({
+    /**
+     * The content of the screen.
+     */
+    children: React.ReactNode;
+} | {
+    /**
+     * The content of the screen.
+     */
+    content: React.ReactNode;
+});
+/**
+ * Renders a screen.
+ *
+ * @param {ScreenProps} props - Props
+ *
+ * @return The rendered screen.
+ */
+export declare function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;

package/build/components/navigator-modal/screen.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { Footer } from "./footer.js";
+import { Header } from "./header.js";
+import styles from './styles.module.scss';
+/**
+ * Renders a screen.
+ *
+ * @param {ScreenProps} props - Props
+ *
+ * @return The rendered screen.
+ */
+export function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }) {
+    const hasFooter = Boolean(footerContent || (footerActions && footerActions.length));
+    return (_jsx(Navigator.Screen, { path: path, className: clsx(styles.screen, className), children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked }), _jsxs(Flex, { gap: 0, align: "start", className: styles.body, children: [sidebar ? _jsx("div", { className: styles.sidebar, children: sidebar }) : null, _jsx("div", { className: styles.content, children: ('children' in props && props.children) || ('content' in props && props.content) })] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
+}

package/build/components/navigator-modal/types.d.ts

@@ -0,0 +1,24 @@
+export type TNavigatorModalContext = {
+    /**
+     * Whether the modal is dismissible.
+     */
+    isDismissible?: boolean;
+    /**
+     * The initial active path.
+     */
+    initialPath?: string;
+    /**
+     * Callback fired when the close button is clicked.
+     */
+    onClose?: VoidFunction;
+};
+export type SharedProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * className to be applied to the modal.
+     */
+    className?: string;
+};

package/build/components/navigator-modal/types.js

@@ -0,0 +1 @@
+export {};

package/build/index.d.ts

@@ -64,3 +64,4 @@ export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';
 export * from './components/global-notices/index.ts';
+export * from './components/navigator-modal/index.tsx';

package/build/index.js

@@ -78,3 +78,4 @@ export { default as DiffViewer } from "./components/diff-viewer/index.js";
 export { default as MarkedLines } from "./components/marked-lines/index.js";
 export { default as DetailsViewer } from "./components/details-viewer/index.js";
 export * from "./components/global-notices/index.js";
+export * from "./components/navigator-modal/index.js";

package/components/jetpack-logo/index.tsx

@@ -8,9 +8,11 @@ const JetpackLogo: FC< JetpackLogoProps > = ( {
 	showText = true,
 	className,
 	height = 32,
+	title,
 	...otherProps
 } ) => {
 	const viewBox = showText ? '0 0 118 32' : '0 0 32 32';
+	const logoTitle = title ?? __( 'Jetpack Logo', 'jetpack-components' );
 
 	return (
 		<svg
@@ -25,7 +27,7 @@ const JetpackLogo: FC< JetpackLogoProps > = ( {
 			// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
 			role="img"
 		>
-			<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack-components' ) }</title>
+			<title id="jetpack-logo-title">{ logoTitle }</title>
 			<path
 				fill={ logoColor }
 				d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"

package/components/jetpack-logo/types.ts

@@ -4,4 +4,5 @@ export type JetpackLogoProps = {
 	height?: number;
 	showText?: boolean;
 	logoColor?: string;
+	title?: string;
 };

package/components/navigator-modal/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@wordpress/element';
+import type { TNavigatorModalContext } from './types.ts';
+
+const initialContextValue: TNavigatorModalContext = {
+	onClose: () => {},
+};
+
+export const NavigatorModalContext = createContext( initialContextValue );
+
+NavigatorModalContext.displayName = 'NavigatorModalContext';

package/components/navigator-modal/footer.tsx

@@ -0,0 +1,50 @@
+import { Button, Flex, FlexBlock, FlexItem, useNavigator } from '@wordpress/components';
+import { useContext } from 'react';
+import { NavigatorModalContext } from './context.ts';
+import styles from './styles.module.scss';
+import { SharedProps } from './types.ts';
+
+export type FooterProps = SharedProps & {
+	actions?: Array< React.ComponentProps< typeof Button > >;
+	isScreenLocked?: boolean;
+};
+
+/**
+ * Renders a footer.
+ *
+ * @param {FooterProps} props - Props
+ *
+ * @return The rendered footer.
+ */
+export function Footer( { children, actions, isScreenLocked }: FooterProps ) {
+	const navigator = useNavigator();
+	const context = useContext( NavigatorModalContext );
+
+	return (
+		<Flex className={ styles.footer }>
+			<FlexBlock>{ children }</FlexBlock>
+			{ actions ? (
+				<FlexItem>
+					<Flex>
+						{ actions.map( ( { onClick, ...actionProps }, index ) => (
+							<Button
+								// eslint-disable-next-line react/jsx-no-bind
+								onClick={ event => {
+									onClick?.( event );
+
+									if ( ! isScreenLocked ) {
+										navigator.goBack();
+									} else {
+										context.onClose?.();
+									}
+								} }
+								key={ index }
+								{ ...actionProps }
+							/>
+						) ) }
+					</Flex>
+				</FlexItem>
+			) : null }
+		</Flex>
+	);
+}

package/components/navigator-modal/header.tsx

@@ -0,0 +1,58 @@
+import { Button, useNavigator } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight, close } from '@wordpress/icons';
+import { useCallback, useContext } from 'react';
+import { NavigatorModalContext } from './context.ts';
+import styles from './styles.module.scss';
+
+export type HeaderProps = {
+	/**
+	 * The title of the header.
+	 */
+	title: string;
+	/**
+	 * Whether the screen is locked, in which case to hide the back button.
+	 */
+	isScreenLocked?: boolean;
+};
+
+/**
+ * Renders a header for the NavigatorModal.
+ * @param {HeaderProps} props - Props
+ *
+ * @return component
+ */
+export function Header( { title, isScreenLocked }: HeaderProps ) {
+	const context = useContext( NavigatorModalContext );
+	const navigator = useNavigator();
+
+	const onGoBack = useCallback( () => {
+		navigator.goBack();
+	}, [ navigator ] );
+
+	return (
+		<div className={ styles.header }>
+			<div className={ styles[ 'title-wrap' ] }>
+				{ ! isScreenLocked ? (
+					<Button
+						label={ __( 'Go back', 'jetpack-components' ) }
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						onClick={ onGoBack }
+						variant="tertiary"
+						size="compact"
+					/>
+				) : null }
+				<h1>{ title }</h1>
+			</div>
+			{ context.isDismissible ? (
+				<Button
+					size="compact"
+					onClick={ context.onClose }
+					icon={ close }
+					label={ __( 'Close', 'jetpack-components' ) }
+					variant="tertiary"
+				/>
+			) : null }
+		</div>
+	);
+}

package/components/navigator-modal/index.tsx

@@ -0,0 +1,57 @@
+import { Modal, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { useContext } from 'react';
+import { NavigatorModalContext } from './context.ts';
+import { Screen } from './screen.tsx';
+import styles from './styles.module.scss';
+import { TNavigatorModalContext, SharedProps } from './types.ts';
+
+/**
+ * Renders the internal NavigatorModal component.
+ *
+ * @param { SharedProps } props - Props
+ *
+ * @return Component
+ */
+function InternalNavigatorModal( { children, className }: SharedProps ) {
+	const context = useContext( NavigatorModalContext );
+
+	return (
+		<Modal
+			__experimentalHideHeader
+			onRequestClose={ context.onClose }
+			className={ clsx( styles.modal, className ) }
+		>
+			<Navigator initialPath={ context.initialPath } className={ styles.navigator }>
+				{ children }
+			</Navigator>
+		</Modal>
+	);
+}
+
+/**
+ * Renders a modal with navigator capabilities.
+ *
+ * @param {SharedProps & TNavigatorModalContext} props - Props
+ *
+ * @return Component
+ */
+function NavigatorModalMain( {
+	children,
+	className,
+	initialPath = '/',
+	onClose,
+	isDismissible = true,
+}: SharedProps & TNavigatorModalContext ) {
+	return (
+		<NavigatorModalContext.Provider value={ { onClose, initialPath, isDismissible } }>
+			<InternalNavigatorModal className={ className }>{ children }</InternalNavigatorModal>
+		</NavigatorModalContext.Provider>
+	);
+}
+
+export const NavigatorModal = Object.assign( NavigatorModalMain, {
+	Screen: Object.assign( Screen, {
+		displayName: 'NavigatorModal.Screen',
+	} ),
+} );

package/components/navigator-modal/screen.tsx

@@ -0,0 +1,94 @@
+import { Flex, Navigator } from '@wordpress/components';
+import clsx from 'clsx';
+import { Footer, FooterProps } from './footer.tsx';
+import { Header } from './header.tsx';
+import styles from './styles.module.scss';
+
+export type ScreenProps = {
+	/**
+	 * The title of the screen.
+	 */
+	title?: string;
+
+	/**
+	 * The path of the screen.
+	 */
+	path: string;
+	/**
+	 * The sidebar content
+	 */
+	sidebar?: React.ReactNode;
+	/**
+	 * Whether the screen is locked or has a parent screen.
+	 *
+	 * When it's locked, it means there will be no navigation back to a previous screen.
+	 */
+	isScreenLocked?: boolean;
+	/**
+	 * The footer content
+	 */
+	footerContent?: React.ReactNode;
+
+	/**
+	 * The footer actions
+	 */
+	footerActions?: FooterProps[ 'actions' ];
+
+	/**
+	 * className to be applied to the modal.
+	 */
+	className?: string;
+} & (
+	| {
+			/**
+			 * The content of the screen.
+			 */
+			children: React.ReactNode;
+	  }
+	| {
+			/**
+			 * The content of the screen.
+			 */
+			content: React.ReactNode;
+	  }
+);
+
+/**
+ * Renders a screen.
+ *
+ * @param {ScreenProps} props - Props
+ *
+ * @return The rendered screen.
+ */
+export function Screen( {
+	path,
+	className,
+	title,
+	sidebar,
+	isScreenLocked,
+	footerContent,
+	footerActions,
+	...props
+}: ScreenProps ) {
+	const hasFooter = Boolean( footerContent || ( footerActions && footerActions.length ) );
+
+	return (
+		<Navigator.Screen path={ path } className={ clsx( styles.screen, className ) }>
+			<Flex direction="column" gap={ 0 }>
+				<Header title={ title } isScreenLocked={ isScreenLocked } />
+
+				<Flex gap={ 0 } align="start" className={ styles.body }>
+					{ sidebar ? <div className={ styles.sidebar }>{ sidebar }</div> : null }
+					<div className={ styles.content }>
+						{ ( 'children' in props && props.children ) || ( 'content' in props && props.content ) }
+					</div>
+				</Flex>
+				{ hasFooter ? (
+					<Footer actions={ footerActions } isScreenLocked={ isScreenLocked }>
+						{ footerContent }
+					</Footer>
+				) : null }
+			</Flex>
+		</Navigator.Screen>
+	);
+}

package/components/navigator-modal/styles.module.scss

@@ -0,0 +1,100 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.modal {
+	container-type: inline-size;
+	container-name: navigator-modal;
+
+	width: 80rem;
+
+	@include gb.break-medium() {
+		height: 40rem;
+		max-height: 90%;
+	}
+
+	:global(.components-modal__content) {
+		padding: 0;
+
+		> div {
+			height: 100%;
+		}
+	}
+}
+
+.navigator {
+	height: 100%;
+}
+
+.screen {
+	height: 100%;
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1.5rem;
+		height: 4.5rem;
+		border-bottom: 1px solid gb.$gray-200;
+		flex-shrink: 0;
+
+		.title-wrap {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+		}
+
+		h1 {
+			margin: 0;
+			font-size: 15px;
+			font-weight: 500;
+			line-height: 24px;
+			color: gb.$gray-900;
+		}
+	}
+
+	.body {
+		height: 100%;
+		overflow: auto;
+		flex-direction: column;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+
+			& {
+				flex-direction: row;
+			}
+		}
+	}
+
+	.sidebar {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		flex-basis: 30%;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+
+			& {
+				height: 100%;
+				max-width: 22rem;
+				min-width: 18rem;
+				flex-shrink: 0;
+				border-inline-end: 1px solid gb.$gray-300;
+			}
+		}
+	}
+
+	.content {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		overflow: auto;
+	}
+
+	.footer {
+		padding: 1rem 1.5rem;
+		border-top: 1px solid gb.$gray-300;
+		height: 4.5rem;
+		flex-shrink: 0;
+	}
+
+}

package/components/navigator-modal/types.ts

@@ -0,0 +1,27 @@
+export type TNavigatorModalContext = {
+	/**
+	 * Whether the modal is dismissible.
+	 */
+	isDismissible?: boolean;
+	/**
+	 * The initial active path.
+	 */
+	initialPath?: string;
+
+	/**
+	 * Callback fired when the close button is clicked.
+	 */
+	onClose?: VoidFunction;
+};
+
+export type SharedProps = {
+	/**
+	 * The content of the component.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * className to be applied to the modal.
+	 */
+	className?: string;
+};

package/index.ts

@@ -85,3 +85,4 @@ export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';
 export { default as DetailsViewer } from './components/details-viewer/index.tsx';
 export * from './components/global-notices/index.ts';
+export * from './components/navigator-modal/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.3.12",
+	"version": "1.4.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -41,30 +41,30 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.11",
-		"@automattic/jetpack-boost-score-api": "^1.0.18",
+		"@automattic/jetpack-api": "^1.0.12",
+		"@automattic/jetpack-boost-score-api": "^1.0.20",
 		"@automattic/jetpack-script-data": "^0.5.4",
 		"@automattic/number-formatters": "^1.0.15",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.35.0",
-		"@wordpress/components": "30.8.0",
-		"@wordpress/compose": "7.35.0",
-		"@wordpress/data": "10.35.0",
-		"@wordpress/date": "5.35.0",
-		"@wordpress/element": "6.35.0",
-		"@wordpress/i18n": "6.8.0",
-		"@wordpress/icons": "11.2.0",
-		"@wordpress/notices": "5.35.0",
+		"@wordpress/browserslist-config": "6.36.0",
+		"@wordpress/components": "30.9.0",
+		"@wordpress/compose": "7.36.0",
+		"@wordpress/data": "10.36.0",
+		"@wordpress/date": "5.36.0",
+		"@wordpress/element": "6.36.0",
+		"@wordpress/i18n": "6.9.0",
+		"@wordpress/icons": "11.3.0",
+		"@wordpress/notices": "5.36.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.4",
+		"social-logos": "^3.3.5",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.11",
+		"@automattic/jetpack-base-styles": "^1.0.12",
 		"@babel/core": "7.28.4",
 		"@babel/preset-react": "7.27.1",
 		"@jest/globals": "30.2.0",