@automattic/jetpack-components 1.4.15 → 1.5.0

package/build/components/terms-of-service/index.js

@@ -3,8 +3,8 @@ import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { getRedirectUrl } from "../../index.js";
-import Text from "../text/index.js";
+import { getRedirectUrl } from '../../index.js';
+import Text from '../text/index.js';
 import './styles.scss';
 const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {
     const getTOSContent = () => {

package/build/components/testimonials/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from '@wordpress/element';
-import Gridicon from "../gridicon/index.js";
-import { Testimonial } from "./testimonial.js";
+import Gridicon from '../gridicon/index.js';
+import { Testimonial } from './testimonial.js';
 const Testimonials = ({ testimonials }) => {
     const [currentTestimonialIndex, setcurrentTestimonialIndex] = useState(0);
     const incrementTestimonial = useCallback(() => {

package/build/components/testimonials/testimonial.js

@@ -2,6 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import './style.scss';
 const Testimonial = ({ quote, author, profession, img, hidden }) => {
-    return (_jsxs("div", { className: clsx('testimonial', hidden ? 'hidden' : 'show'), children: [_jsx("img", { className: "testimonial__author-img", src: img, alt: author }), _jsxs("div", { className: "testimonial__content", children: [_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "testimonial__quote-icon", children: [_jsx("path", { d: "M14.6667 24L6.66675 24L6.66675 16L14.6667 16L14.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M26.6667 24L18.6667 24L18.6667 16L26.6667 16L26.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M6.66675 24.0001C6.66675 19.5573 6.66675 14.9337 6.66675 10.6686C6.66675 6.40254 10.0001 6.67016 12.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" }), _jsx("path", { d: "M18.6668 24.0001C18.6667 19.5573 18.6667 14.9337 18.6667 10.6686C18.6667 6.40254 22.0001 6.67016 24.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" })] }), _jsxs("div", { className: "testimonial__text-block", children: [_jsxs("blockquote", { className: "testimonial__quote", children: ["\u201C", quote, "\u201D"] }), _jsxs("figcaption", { children: [_jsx("span", { className: "testimonial__author", children: author }), _jsx("span", { className: "testimonial__profession", children: profession })] })] })] })] }, author));
+    return (_jsxs("div", { className: clsx('testimonial', hidden ? 'hidden' : 'show'), children: [
+            _jsx("img", { className: "testimonial__author-img", src: img, alt: author }), _jsxs("div", { className: "testimonial__content", children: [
+                    _jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "testimonial__quote-icon", children: [
+                            _jsx("path", { d: "M14.6667 24L6.66675 24L6.66675 16L14.6667 16L14.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M26.6667 24L18.6667 24L18.6667 16L26.6667 16L26.6667 24Z", fill: "#1E1E1E" }), _jsx("path", { d: "M6.66675 24.0001C6.66675 19.5573 6.66675 14.9337 6.66675 10.6686C6.66675 6.40254 10.0001 6.67016 12.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" }), _jsx("path", { d: "M18.6668 24.0001C18.6667 19.5573 18.6667 14.9337 18.6667 10.6686C18.6667 6.40254 22.0001 6.67016 24.0001 6.66987", stroke: "#1E1E1E", strokeWidth: "1.5" })
+                        ] }), _jsxs("div", { className: "testimonial__text-block", children: [
+                            _jsxs("blockquote", { className: "testimonial__quote", children: ["\u201C", quote, "\u201D"] }), _jsxs("figcaption", { children: [
+                                    _jsx("span", { className: "testimonial__author", children: author }), _jsx("span", { className: "testimonial__profession", children: profession })
+                                ] })
+                        ] })
+                ] })
+        ] }, author));
 };
 export { Testimonial };

package/build/components/text/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef, useMemo } from 'react';
-import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from "./constants.js";
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.js';
 import styles from './style.module.scss';
 /**
  * Text component.
@@ -50,4 +50,4 @@ export const H3 = ({ children, weight = 'bold', ...componentProps }) => {
  * @return {ReactElement} - JSX.Element
  */
 export const Title = ({ children, size = 'medium', ...componentProps }) => (_jsx(Text, { variant: `title-${size}`, mb: 1, ...componentProps, children: children }));
-export * from "./constants.js";
+export * from './constants.js';

package/build/components/upsell-banner/index.js

@@ -14,8 +14,13 @@ import './style.scss';
  */
 const UpsellBanner = props => {
     const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, } = props;
-    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [_jsxs("div", { className: "upsell-banner--content-info", children: [_jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
+    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [
+                        _jsxs("div", { className: "upsell-banner--content-info", children: [
+                                _jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
                                         br: _jsx("br", {}),
-                                    }) })] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })] })] }) }));
+                                    }) })
+                            ] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })
+                    ] })
+            ] }) }));
 };
 export default UpsellBanner;

package/build/components/zendesk-chat/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useCallback } from 'react';
-import { chatKey } from "./constants.js";
+import { chatKey } from './constants.js';
 export const ZendeskChat = ({ jwt_token }) => {
     const authenticateUser = useCallback(() => {
         if (typeof window !== 'undefined' && typeof window.zE === 'function') {

package/build/index.js

@@ -12,69 +12,69 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program; if not, see <https://www.gnu.org/licenses/>.
 */
-export { default as JetpackLogo } from "./components/jetpack-logo/index.js";
-export { default as JetpackSearchLogo } from "./components/jetpack-search-logo/index.js";
-export { default as JetpackProtectLogo } from "./components/jetpack-protect-logo/index.js";
-export { default as JetpackVaultPressBackupLogo } from "./components/jetpack-vaultpress-backup-logo/index.js";
-export { default as JetpackVideoPressLogo } from "./components/jetpack-videopress-logo/index.js";
-export { default as getRedirectUrl } from "./tools/jp-redirect/index.js";
-export { default as getProductCheckoutUrl } from "./tools/get-product-checkout-url/index.js";
-export { isFirstMonthTrial } from "./tools/pricing-utils/index.js";
-export { default as AutomatticBylineLogo } from "./components/automattic-byline-logo/index.js";
-export { default as AutomatticIconLogo } from "./components/automattic-icon-logo/index.js";
-export { default as AutomatticForAgenciesLogo } from "./components/automattic-for-agencies-logo/index.js";
-export { default as JetpackFooter } from "./components/jetpack-footer/index.js";
-export { default as Spinner } from "./components/spinner/index.js";
-export { default as Gridicon } from "./components/gridicon/index.js";
-export { default as IconTooltip } from "./components/icon-tooltip/index.js";
-export { default as ActionButton } from "./components/action-button/index.js";
-export { default as PricingCard } from "./components/pricing-card/index.js";
-export { default as NumberSlider } from "./components/number-slider/index.js";
-export { default as AdminSection } from "./components/admin-section/basic/index.js";
-export { default as AdminSectionHero } from "./components/admin-section/hero/index.js";
-export { default as AdminPage } from "./components/admin-page/index.js";
-export { default as DecorativeCard } from "./components/decorative-card/index.js";
-export { default as Col } from "./components/layout/col/index.js";
-export { default as Testimonials } from "./components/testimonials/index.js";
-export { default as Container } from "./components/layout/container/index.js";
-export { default as useBreakpointMatch } from "./components/layout/use-breakpoint-match/index.js";
-export { default as CopyToClipboard } from "./components/copy-to-clipboard/index.js";
-export * from "./components/icons/index.js";
-export { default as SplitButton } from "./components/split-button/index.js";
-export { default as ThemeProvider } from "./components/theme-provider/index.js";
-export { default as Text, H2, H3, Title } from "./components/text/index.js";
-export { default as ToggleControl } from "./components/toggle-control/index.js";
-export { default as NumberControl } from "./components/number-control/index.js";
-export { default as QRCode } from "./components/qr-code/index.js";
-export { default as Button } from "./components/button/index.js";
-export { default as LoadingPlaceholder } from "./components/loading-placeholder/index.js";
-export { default as TermsOfService } from "./components/terms-of-service/index.js";
-export { default as Badge } from "./components/badge/index.js";
-export { default as Chip } from "./components/chip/index.js";
-export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from "./components/pricing-table/index.js";
-export { default as BoostScoreBar } from "./components/boost-score-bar/index.js";
-export { default as BoostScoreGraph } from "./components/boost-score-graph/index.js";
-export { default as ProductPrice } from "./components/product-price/index.js";
-export { default as ProductOffer, IconsCard } from "./components/product-offer/index.js";
-export { default as Dialog } from "./components/dialog/index.js";
-export { default as DotPager } from "./components/dot-pager/index.js";
-export { default as DonutMeter } from "./components/donut-meter/index.js";
-export { default as RecordMeterBar } from "./components/record-meter-bar/index.js";
-export { default as ContextualUpgradeTrigger } from "./components/contextual-upgrade-trigger/index.js";
-export { default as Alert } from "./components/alert/index.js";
-export { default as Notice } from "./components/notice/index.js";
-export { default as Popover } from "./components/popover/index.js";
-export { default as Status } from "./components/status/index.js";
-export { default as IndeterminateProgressBar } from "./components/indeterminate-progress-bar/index.js";
-export { default as ActionPopover } from "./components/action-popover/index.js";
-export { default as ZendeskChat } from "./components/zendesk-chat/index.js";
-export { default as ProgressBar } from "./components/progress-bar/index.js";
-export { default as UpsellBanner } from "./components/upsell-banner/index.js";
-export { getUserLocale, cleanLocale } from "./lib/locale/index.js";
-export { default as RadioControl } from "./components/radio-control/index.js";
-export { default as StatCard } from "./components/stat-card/index.js";
-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";
+export { default as JetpackLogo } from './components/jetpack-logo/index.js';
+export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.js';
+export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.js';
+export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.js';
+export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.js';
+export { default as getRedirectUrl } from './tools/jp-redirect/index.js';
+export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.js';
+export { isFirstMonthTrial } from './tools/pricing-utils/index.js';
+export { default as AutomatticBylineLogo } from './components/automattic-byline-logo/index.js';
+export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
+export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
+export { default as JetpackFooter } from './components/jetpack-footer/index.js';
+export { default as Spinner } from './components/spinner/index.js';
+export { default as Gridicon } from './components/gridicon/index.js';
+export { default as IconTooltip } from './components/icon-tooltip/index.js';
+export { default as ActionButton } from './components/action-button/index.js';
+export { default as PricingCard } from './components/pricing-card/index.js';
+export { default as NumberSlider } from './components/number-slider/index.js';
+export { default as AdminSection } from './components/admin-section/basic/index.js';
+export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
+export { default as AdminPage } from './components/admin-page/index.js';
+export { default as DecorativeCard } from './components/decorative-card/index.js';
+export { default as Col } from './components/layout/col/index.js';
+export { default as Testimonials } from './components/testimonials/index.js';
+export { default as Container } from './components/layout/container/index.js';
+export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.js';
+export { default as CopyToClipboard } from './components/copy-to-clipboard/index.js';
+export * from './components/icons/index.js';
+export { default as SplitButton } from './components/split-button/index.js';
+export { default as ThemeProvider } from './components/theme-provider/index.js';
+export { default as Text, H2, H3, Title } from './components/text/index.js';
+export { default as ToggleControl } from './components/toggle-control/index.js';
+export { default as NumberControl } from './components/number-control/index.js';
+export { default as QRCode } from './components/qr-code/index.js';
+export { default as Button } from './components/button/index.js';
+export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
+export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Badge } from './components/badge/index.js';
+export { default as Chip } from './components/chip/index.js';
+export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.js';
+export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
+export { default as BoostScoreGraph } from './components/boost-score-graph/index.js';
+export { default as ProductPrice } from './components/product-price/index.js';
+export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
+export { default as Dialog } from './components/dialog/index.js';
+export { default as DotPager } from './components/dot-pager/index.js';
+export { default as DonutMeter } from './components/donut-meter/index.js';
+export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
+export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';
+export { default as Alert } from './components/alert/index.js';
+export { default as Notice } from './components/notice/index.js';
+export { default as Popover } from './components/popover/index.js';
+export { default as Status } from './components/status/index.js';
+export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
+export { default as ActionPopover } from './components/action-popover/index.js';
+export { default as ZendeskChat } from './components/zendesk-chat/index.js';
+export { default as ProgressBar } from './components/progress-bar/index.js';
+export { default as UpsellBanner } from './components/upsell-banner/index.js';
+export { getUserLocale, cleanLocale } from './lib/locale/index.js';
+export { default as RadioControl } from './components/radio-control/index.js';
+export { default as StatCard } from './components/stat-card/index.js';
+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/admin-page/index.tsx

@@ -1,4 +1,10 @@
 import restApi from '@automattic/jetpack-api';
+import { Page } from '@wordpress/admin-ui';
+import '@wordpress/admin-ui/build-style/style.css';
+import {
+	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
@@ -21,7 +27,7 @@ import type { FC, ReactNode } from 'react';
 const AdminPage: FC< AdminPageProps > = ( {
 	children,
 	className,
-	moduleName = __( 'Jetpack', 'jetpack-components' ),
+	moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */,
 	moduleNameHref,
 	showHeader = true,
 	showFooter = true,
@@ -32,6 +38,12 @@ const AdminPage: FC< AdminPageProps > = ( {
 	apiNonce = '',
 	optionalMenuItems,
 	header,
+	title,
+	subTitle,
+	logo,
+	actions,
+	tabs,
+	showBottomBorder = true,
 } ) => {
 	useEffect( () => {
 		restApi.setApiRoot( apiRoot );
@@ -40,6 +52,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 
 	const rootClassName = clsx( styles[ 'admin-page' ], className, {
 		[ styles.background ]: showBackground,
+		[ styles[ 'without-bottom-border' ] ]: tabs || ! showBottomBorder,
 	} );
 
 	const testConnection = useCallback( async () => {
@@ -60,6 +73,56 @@ const AdminPage: FC< AdminPageProps > = ( {
 		}
 	}, [] );
 
+	// Compose the title with logo for the admin-ui Page header.
+	// Note: The inner Heading causes a double h2 wrapping because Page's Header
+	// also wraps title in a Heading. This is a known issue — the inner Heading is
+	// needed until https://github.com/WordPress/gutenberg/pull/75899 fixes
+	// non-string title rendering in admin-ui. Once that lands, remove the Heading
+	// here and pass the plain HStack with a string child.
+	const composedTitle = title ? (
+		<HStack spacing={ 2 } justify="left">
+			{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
+			<Heading as="h2" level={ 3 } weight={ 500 } truncate>
+				{ title }
+			</Heading>
+		</HStack>
+	) : undefined;
+
+	const footer = showFooter && (
+		<Container horizontalSpacing={ 5 }>
+			<Col>
+				<JetpackFooter
+					moduleName={ moduleName }
+					moduleNameHref={ moduleNameHref }
+					menu={ optionalMenuItems }
+					useInternalLinks={ useInternalLinks }
+				/>
+			</Col>
+		</Container>
+	);
+
+	// When title is provided, use admin-ui Page for the full page layout.
+	if ( showHeader && composedTitle ) {
+		return (
+			<div className={ rootClassName }>
+				<Page
+					ariaLabel={ title }
+					title={ composedTitle }
+					subTitle={ subTitle }
+					actions={ actions }
+					showSidebarToggle={ false }
+				>
+					{ tabs }
+					<Container fluid horizontalSpacing={ 0 }>
+						<Col>{ children }</Col>
+					</Container>
+					{ footer }
+				</Page>
+			</div>
+		);
+	}
+
+	// Legacy path: no title provided, render the classic header.
 	return (
 		<div className={ rootClassName }>
 			{ showHeader && (
@@ -85,18 +148,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 			<Container fluid horizontalSpacing={ 0 }>
 				<Col>{ children }</Col>
 			</Container>
-			{ showFooter && (
-				<Container horizontalSpacing={ 5 }>
-					<Col>
-						<JetpackFooter
-							moduleName={ moduleName }
-							moduleNameHref={ moduleNameHref }
-							menu={ optionalMenuItems }
-							useInternalLinks={ useInternalLinks }
-						/>
-					</Col>
-				</Container>
-			) }
+			{ footer }
 		</div>
 	);
 };

package/components/admin-page/style.module.scss

@@ -9,6 +9,26 @@
 		background-color: var(--jp-white);
 	}
 
+	// Remove the admin-ui header border when tabs are present,
+	// or when showBottomBorder is false.
+	// Ideally admin-ui would expose a prop or CSS custom property for this:
+	// https://github.com/WordPress/gutenberg/issues/75428
+	&.without-bottom-border :global(.admin-ui-page__header) {
+		border-bottom: none;
+	}
+
+	// Disable sticky header until we make it work better across all pages.
+	// JETPACK-1386
+	:global(.admin-ui-page__header) {
+		position: relative;
+	}
+
+	// Normalize admin headers: implementation of admin-ui needs to
+	// comprehend old wp-admin floating containers, such as Hello Dolly.
+	:global(.admin-ui-page) {
+		clear: both;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;
@@ -26,3 +46,9 @@
 		color: #fff;
 	}
 }
+
+// Make Hello Dolly background white for Jetpack admin pages.
+:global(.jetpack-admin-page #dolly) {
+	background-color: #fff;
+}
+

package/components/admin-page/types.ts

@@ -18,10 +18,37 @@ export type AdminPageProps = {
 	showHeader?: boolean;
 
 	/**
-	 * Custom header. Optional
+	 * Custom header. Optional.
+	 * @deprecated Use `title` and `subTitle` props instead for the unified header.
 	 */
 	header?: ReactNode;
 
+	/**
+	 * Product title displayed in the unified header (e.g. "Social", "Backup").
+	 * When provided, renders the admin-ui Page header instead of the legacy header slot.
+	 */
+	title?: string;
+
+	/**
+	 * Optional tagline displayed below the title in the unified header.
+	 */
+	subTitle?: ReactNode;
+
+	/**
+	 * Custom logo element for the unified header. Defaults to JetpackLogo icon.
+	 */
+	logo?: ReactNode;
+
+	/**
+	 * Action elements displayed on the right side of the unified header.
+	 */
+	actions?: ReactNode;
+
+	/**
+	 * Tab navigation displayed below the title/tagline in the unified header.
+	 */
+	tabs?: ReactNode;
+
 	/**
 	 * Whether or not to display the Footer
 	 */
@@ -71,4 +98,10 @@ export type AdminPageProps = {
 	 * Class name to be applied to the root element of the component.
 	 */
 	className?: string;
+
+	/**
+	 * Show bottom border of the header. Defaults to true.
+	 * Hidden when `tabs` is used.
+	 */
+	showBottomBorder?: boolean;
 };

package/components/button/index.tsx

@@ -12,7 +12,7 @@ import type { ButtonProps } from './types.ts';
  * @param {ButtonProps} props - Component Props
  * @return {ReactNode} Rendered button
  */
-const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
+const Button = forwardRef< HTMLElement, ButtonProps >( ( props, ref ) => {
 	const {
 		children,
 		variant = 'primary',

package/components/jetpack-footer/index.tsx

@@ -33,7 +33,7 @@ const ExternalIcon: FC = () => (
  * @return {ReactNode} JetpackFooter component.
  */
 const JetpackFooter: FC< JetpackFooterProps > = ( {
-	moduleName = __( 'Jetpack', 'jetpack-components' ),
+	moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */,
 	className,
 	moduleNameHref = 'https://jetpack.com',
 	menu,

package/components/layout/container/style.module.scss

@@ -8,11 +8,12 @@
 	@include breakpoints.media(#{$size}) using ($columns) {
 		padding: 0 #{$padding};
 		grid-template-columns: repeat(#{$columns}, minmax(0, 1fr));
+		max-width: calc(var(--max-container-width) + 2 * #{$padding});
 	}
 }
 
 .container {
-	--max-container-width: 1128px;
+	--max-container-width: 1040px;
 	// vertical spacing
 	--vertical-gutter: 24px;
 	// horizontal spacing
@@ -20,7 +21,6 @@
 
 	display: grid;
 	column-gap: var(--vertical-gutter);
-	max-width: var(--max-container-width);
 	margin: 0 auto;
 	width: 100%;
 

package/components/navigator-modal/index.tsx

@@ -1,6 +1,6 @@
 import { Modal, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { NavigatorModalContext } from './context.ts';
 import { Screen } from './screen.tsx';
 import './styles.scss';
@@ -23,16 +23,31 @@ function InternalNavigatorModal( {
 	className,
 	...props
 }: Omit< ModalProps, 'onRequestClose' > ) {
-	const context = useContext( NavigatorModalContext );
+	const { onClose, initialPath } = useContext( NavigatorModalContext );
+
+	// WordPress Modal's dismisser mechanism (ModalContext) calls onRequestClose()
+	// without arguments when another non-nested Modal mounts. We guard against
+	// this so that external modals (e.g. Image Studio) don't destroy this one.
+	// User-initiated closes (Escape, close button) always pass an event.
+	// The NavigatorModal's own Header/Footer close buttons call context.onClose
+	// directly and are unaffected by this guard.
+	const onRequestClose = useCallback(
+		( event?: React.SyntheticEvent ) => {
+			if ( event ) {
+				onClose?.();
+			}
+		},
+		[ onClose ]
+	);
 
 	return (
 		<Modal
 			__experimentalHideHeader
-			onRequestClose={ context.onClose }
+			onRequestClose={ onRequestClose }
 			className={ clsx( 'jp-navigator-modal', className ) }
 			{ ...props }
 		>
-			<Navigator initialPath={ context.initialPath } className="jp-navigator-modal__navigator">
+			<Navigator initialPath={ initialPath } className="jp-navigator-modal__navigator">
 				{ children }
 			</Navigator>
 		</Modal>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.4.15",
+	"version": "1.5.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -34,60 +34,61 @@
 	"scripts": {
 		"build": "pnpm run clean && pnpm run compile-ts && pnpm run copy-scss",
 		"clean": "rm -rf build/",
-		"compile-ts": "tsc --pretty --project tsconfig.build.json",
+		"compile-ts": "tsgo --pretty --project tsconfig.build.json",
 		"copy-scss": "node ./tools/copy-scss-to-build.mjs",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
-		"typecheck": "tsc --noEmit"
+		"typecheck": "tsgo --noEmit"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.17",
-		"@automattic/jetpack-boost-score-api": "^1.0.30",
-		"@automattic/jetpack-script-data": "^0.5.5",
-		"@automattic/number-formatters": "^1.1.0",
+		"@automattic/jetpack-api": "^1.0.18",
+		"@automattic/jetpack-boost-score-api": "^1.0.32",
+		"@automattic/jetpack-script-data": "^0.6.1",
+		"@automattic/number-formatters": "^1.1.1",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.39.0",
-		"@wordpress/components": "32.1.0",
-		"@wordpress/compose": "7.39.0",
-		"@wordpress/data": "10.39.0",
-		"@wordpress/date": "5.39.0",
-		"@wordpress/element": "6.39.0",
-		"@wordpress/i18n": "6.12.0",
-		"@wordpress/icons": "11.6.0",
-		"@wordpress/notices": "5.39.0",
+		"@wordpress/admin-ui": "1.9.0",
+		"@wordpress/browserslist-config": "6.40.0",
+		"@wordpress/components": "32.2.0",
+		"@wordpress/compose": "7.40.0",
+		"@wordpress/data": "10.40.0",
+		"@wordpress/date": "5.40.0",
+		"@wordpress/element": "6.40.0",
+		"@wordpress/i18n": "6.13.0",
+		"@wordpress/icons": "11.7.0",
+		"@wordpress/notices": "5.40.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.9",
+		"social-logos": "^3.3.11",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.17",
+		"@automattic/jetpack-base-styles": "^1.0.18",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.2.0",
-		"@storybook/addon-docs": "10.2.3",
-		"@storybook/react": "10.2.3",
+		"@storybook/addon-docs": "10.2.11",
+		"@storybook/react": "10.2.11",
 		"@testing-library/dom": "10.4.1",
 		"@testing-library/react": "16.3.0",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
-		"@types/react": "18.3.27",
+		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
+		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"jest": "30.2.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "10.2.3",
+		"storybook": "10.2.11",
 		"ts-dedent": "2.2.0",
-		"typescript": "5.9.3",
 		"webpack": "5.105.2",
 		"webpack-cli": "6.0.1"
 	},

package/tools/copy-scss-to-build.mjs

@@ -50,7 +50,7 @@ async function main() {
 		return;
 	}
 
-	for await ( const filePath of fs.glob( '**/*.scss', {
+	for await ( const filePath of fs.glob( '**/*.{scss,css}', {
 		cwd: packageRoot,
 		exclude: Array.from( IGNORED_DIRS, dir => `**/${ dir }/**` ),
 	} ) ) {