@automattic/jetpack-components 1.11.2 → 1.12.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.12.0] - 2026-05-25
+### Added
+- Add subpath exports for `Button`, `PricingTable`, and `ProductPrice` so they can be imported directly from bundles that cannot import the package barrel. [#49063]
+
+### Changed
+- Replace self-imports via package name with relative imports to remove circular-dep risk. [#49096]
+
+### Fixed
+- AdminPage: Update the header-height tab-shift rule so it keeps matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. [#49101]
+- AdminPage: Keep header height consistent across tabs so the tab strip no longer shifts vertically when switching tabs. [#49080]
+- AdminPage: Update the SCSS module's `> header` selectors to `> :first-child` so they keep matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. [#49018]
+
+## [1.11.3] - 2026-05-21
+### Changed
+- Mark ContextualUpgradeTrigger as @deprecated. Use Notice from @wordpress/ui instead. The implementation is unchanged. [#48909]
+- Update package dependencies. [#48405]
+- Update package dependencies. [#49012]
+
 ## [1.11.2] - 2026-05-19
 ### Changed
 - Deprecate Status; inline @wordpress/ui Text in consumers. [#48711]
@@ -1788,6 +1806,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.12.0]: https://github.com/Automattic/jetpack-components/compare/1.11.3...1.12.0
+[1.11.3]: https://github.com/Automattic/jetpack-components/compare/1.11.2...1.11.3
 [1.11.2]: https://github.com/Automattic/jetpack-components/compare/1.11.1...1.11.2
 [1.11.1]: https://github.com/Automattic/jetpack-components/compare/1.11.0...1.11.1
 [1.11.0]: https://github.com/Automattic/jetpack-components/compare/1.10.0...1.11.0

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

@@ -15,15 +15,16 @@
 	// https://github.com/WordPress/gutenberg/issues/75428
 
 	// Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
-	// <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
-	// directly inside that page node — no class hooks anymore.
-	&.without-bottom-border :global(.jp-admin-page__page > header) {
+	// <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
+	// in 2.0). Target it positionally as `> :first-child` so we don't couple
+	// to the element tag or admin-ui's CSS-Modules-hashed class names.
+	&.without-bottom-border :global(.jp-admin-page__page > :first-child) {
 		border-bottom: none;
 	}
 
 	// Disable sticky header until we make it work better across all pages.
 	// JETPACK-1386
-	:global(.jp-admin-page__page > header) {
+	:global(.jp-admin-page__page > :first-child) {
 		position: relative;
 		z-index: 1;
 	}
@@ -34,15 +35,30 @@
 		clear: both;
 	}
 
-	// admin-ui 2.0.0's header `visual` slot is a 24px grid box but does not
-	// center its contents. Our JetpackLogo is 20px tall, so without this it
-	// pins to the top-left of the cell and looks misaligned vs. the title.
-	// admin-ui ships the slot as `<div aria-hidden="true">` in the header.
+	// admin-ui's header `visual` slot is a 24px grid box but does not center
+	// its contents. Our JetpackLogo is 20px tall, so without this it pins to
+	// the top-left of the cell and looks misaligned vs. the title. admin-ui
+	// ships the slot as `<div aria-hidden="true">` in the header.
 	// TODO: remove once upstream centers contents in `.header-visual`.
-	:global(.jp-admin-page__page > header [aria-hidden="true"]) {
+	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
 		place-items: center;
 	}
 
+	// Keep the header a constant height across tabs. The content row's height
+	// is driven by its tallest child (the `actions` slot), so tabs with
+	// differently-sized action controls — or none at all — render headers of
+	// different heights, which shifts the tab strip below them vertically.
+	// Reserve the standard 40px WP control height as a floor and center the
+	// row's items so a shorter control neither stretches nor collapses it.
+	// The content row is identified by the visual logo slot it contains
+	// (`aria-hidden="true"`), so a breadcrumbs-only header isn't affected.
+	// `> :first-child` targets the page header positionally (a `<div>` in
+	// admin-ui ≥ 2.1, a `<header>` in 2.0) — matching the sibling rules above.
+	:global(.jp-admin-page__page > :first-child > div:has([aria-hidden="true"])) {
+		min-height: 40px;
+		align-items: center;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;

package/build/components/contextual-upgrade-trigger/index.d.ts

@@ -1,4 +1,19 @@
 import { CutBaseProps } from './types.ts';
 import type { FC } from 'react';
+/**
+ * ContextualUpgradeTrigger component.
+ *
+ * @deprecated Use `Notice` from `@wordpress/ui` instead. Compose with `Notice.Root` (`intent="info"`), `Notice.Description` for the body, and `Notice.Actions` + `Notice.ActionLink` / `Notice.ActionButton` for the CTA. See https://github.com/Automattic/jetpack/issues/48160 for migration guidance.
+ *
+ * @param      props              - The component properties.
+ * @param      props.description  - The body copy describing the upgrade context.
+ * @param      props.cta          - The CTA label.
+ * @param      props.onClick      - Click handler when rendered as a button.
+ * @param      props.href         - When provided, renders as an anchor instead of a button.
+ * @param      props.openInNewTab - Whether to open the link in a new tab.
+ * @param      props.className    - Optional class for the root element.
+ * @param      props.tooltipText  - Optional tooltip body shown next to the description.
+ * @return The rendered upgrade trigger.
+ */
 declare const ContextualUpgradeTrigger: FC<CutBaseProps>;
 export default ContextualUpgradeTrigger;

package/build/components/contextual-upgrade-trigger/index.js

@@ -4,6 +4,21 @@ import clsx from 'clsx';
 import IconTooltip from '../icon-tooltip/index.js';
 import Text from '../text/index.js';
 import styles from './style.module.scss';
+/**
+ * ContextualUpgradeTrigger component.
+ *
+ * @deprecated Use `Notice` from `@wordpress/ui` instead. Compose with `Notice.Root` (`intent="info"`), `Notice.Description` for the body, and `Notice.Actions` + `Notice.ActionLink` / `Notice.ActionButton` for the CTA. See https://github.com/Automattic/jetpack/issues/48160 for migration guidance.
+ *
+ * @param      props              - The component properties.
+ * @param      props.description  - The body copy describing the upgrade context.
+ * @param      props.cta          - The CTA label.
+ * @param      props.onClick      - Click handler when rendered as a button.
+ * @param      props.href         - When provided, renders as an anchor instead of a button.
+ * @param      props.openInNewTab - Whether to open the link in a new tab.
+ * @param      props.className    - Optional class for the root element.
+ * @param      props.tooltipText  - Optional tooltip body shown next to the description.
+ * @return The rendered upgrade trigger.
+ */
 const ContextualUpgradeTrigger = ({ description, cta, onClick, href, openInNewTab = false, className, tooltipText = '', }) => {
     const Tag = href !== undefined ? 'a' : 'button';
     const tagProps = Tag === 'a' ? { href, ...(openInNewTab && { target: '_blank' }) } : { onClick };

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

@@ -35,8 +35,7 @@ const JetpackFooter = ({ className, menu, ...otherProps }) => {
             _jsxs(Stack, { className: "jetpack-footer__logo", direction: "row", gap: "sm", align: "center", children: [
                     _jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })
                 ] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
-                    const isButton = item.role === 'button';
-                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: isButton ? (_jsx(Link, { render: _jsx("span", {}), tone: "neutral", variant: "default", role: item.role, tabIndex: 0, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })) : (_jsx(Link, { tone: "neutral", variant: "default", href: item.href || '', title: item.title || '', role: item.role, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
+                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: !item.href ? (_jsx(Link, { render: _jsx("span", {}), tabIndex: 0, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined, role: "button" })) : (_jsx(Link, { href: item.href, title: item.title || '', onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
                 }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })
         ] }));
 };

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

@@ -4,7 +4,6 @@ export type JetpackFooterMenuItem = {
     onClick?: () => void;
     onKeyDown?: () => void;
     title?: string;
-    role?: string;
 };
 export type JetpackFooterProps = {
     /**

package/build/components/pricing-card/index.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { getCurrencyObject } from '@automattic/number-formatters';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { LoadingPlaceholder } from '@automattic/jetpack-components';
+import LoadingPlaceholder from '../loading-placeholder/index.js';
 import TermsOfService from '../terms-of-service/index.js';
 import './style.scss';
 /**

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

@@ -3,7 +3,11 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.js';
+// Deep import rather than the package barrel (`../../index.ts`): the barrel
+// pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
+// wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
+// that deep-imports pricing-table (which renders TermsOfService).
+import getRedirectUrl from '../../tools/jp-redirect/index.js';
 import Text from '../text/index.js';
 import './styles.scss';
 const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Button } from '@automattic/jetpack-components';
+import Button from '../button/index.js';
 import './style.scss';
 /**
  * Upsell banner component.

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

@@ -15,15 +15,16 @@
 	// https://github.com/WordPress/gutenberg/issues/75428
 
 	// Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
-	// <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
-	// directly inside that page node — no class hooks anymore.
-	&.without-bottom-border :global(.jp-admin-page__page > header) {
+	// <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
+	// in 2.0). Target it positionally as `> :first-child` so we don't couple
+	// to the element tag or admin-ui's CSS-Modules-hashed class names.
+	&.without-bottom-border :global(.jp-admin-page__page > :first-child) {
 		border-bottom: none;
 	}
 
 	// Disable sticky header until we make it work better across all pages.
 	// JETPACK-1386
-	:global(.jp-admin-page__page > header) {
+	:global(.jp-admin-page__page > :first-child) {
 		position: relative;
 		z-index: 1;
 	}
@@ -34,15 +35,30 @@
 		clear: both;
 	}
 
-	// admin-ui 2.0.0's header `visual` slot is a 24px grid box but does not
-	// center its contents. Our JetpackLogo is 20px tall, so without this it
-	// pins to the top-left of the cell and looks misaligned vs. the title.
-	// admin-ui ships the slot as `<div aria-hidden="true">` in the header.
+	// admin-ui's header `visual` slot is a 24px grid box but does not center
+	// its contents. Our JetpackLogo is 20px tall, so without this it pins to
+	// the top-left of the cell and looks misaligned vs. the title. admin-ui
+	// ships the slot as `<div aria-hidden="true">` in the header.
 	// TODO: remove once upstream centers contents in `.header-visual`.
-	:global(.jp-admin-page__page > header [aria-hidden="true"]) {
+	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
 		place-items: center;
 	}
 
+	// Keep the header a constant height across tabs. The content row's height
+	// is driven by its tallest child (the `actions` slot), so tabs with
+	// differently-sized action controls — or none at all — render headers of
+	// different heights, which shifts the tab strip below them vertically.
+	// Reserve the standard 40px WP control height as a floor and center the
+	// row's items so a shorter control neither stretches nor collapses it.
+	// The content row is identified by the visual logo slot it contains
+	// (`aria-hidden="true"`), so a breadcrumbs-only header isn't affected.
+	// `> :first-child` targets the page header positionally (a `<div>` in
+	// admin-ui ≥ 2.1, a `<header>` in 2.0) — matching the sibling rules above.
+	:global(.jp-admin-page__page > :first-child > div:has([aria-hidden="true"])) {
+		min-height: 40px;
+		align-items: center;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;

package/components/contextual-upgrade-trigger/index.tsx

@@ -6,6 +6,21 @@ import styles from './style.module.scss';
 import { CutBaseProps } from './types.ts';
 import type { FC } from 'react';
 
+/**
+ * ContextualUpgradeTrigger component.
+ *
+ * @deprecated Use `Notice` from `@wordpress/ui` instead. Compose with `Notice.Root` (`intent="info"`), `Notice.Description` for the body, and `Notice.Actions` + `Notice.ActionLink` / `Notice.ActionButton` for the CTA. See https://github.com/Automattic/jetpack/issues/48160 for migration guidance.
+ *
+ * @param      props              - The component properties.
+ * @param      props.description  - The body copy describing the upgrade context.
+ * @param      props.cta          - The CTA label.
+ * @param      props.onClick      - Click handler when rendered as a button.
+ * @param      props.href         - When provided, renders as an anchor instead of a button.
+ * @param      props.openInNewTab - Whether to open the link in a new tab.
+ * @param      props.className    - Optional class for the root element.
+ * @param      props.tooltipText  - Optional tooltip body shown next to the description.
+ * @return The rendered upgrade trigger.
+ */
 const ContextualUpgradeTrigger: FC< CutBaseProps > = ( {
 	description,
 	cta,

package/components/jetpack-footer/index.tsx

@@ -64,31 +64,25 @@ const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherPro
 			</Stack>
 			<Stack render={ <ul /> } direction="row" gap="lg" wrap="wrap">
 				{ items.map( item => {
-					const isButton = item.role === 'button';
-
 					return (
 						<li key={ item.label }>
 							<Text
 								variant="body-md"
 								className="jetpack-footer__menu-item"
 								render={
-									isButton ? (
+									! item.href ? (
 										<Link
 											render={ <span /> }
-											tone="neutral"
-											variant="default"
-											role={ item.role }
 											tabIndex={ 0 }
+											title={ item.title || '' }
 											onClick={ item.onClick || undefined }
 											onKeyDown={ item.onKeyDown || undefined }
+											role="button"
 										/>
 									) : (
 										<Link
-											tone="neutral"
-											variant="default"
-											href={ item.href || '' }
+											href={ item.href }
 											title={ item.title || '' }
-											role={ item.role }
 											onClick={ item.onClick || undefined }
 											onKeyDown={ item.onKeyDown || undefined }
 										/>

package/components/jetpack-footer/types.ts

@@ -4,7 +4,6 @@ export type JetpackFooterMenuItem = {
 	onClick?: () => void;
 	onKeyDown?: () => void;
 	title?: string;
-	role?: string;
 };
 
 export type JetpackFooterProps = {

package/components/pricing-card/index.tsx

@@ -1,7 +1,7 @@
 import { getCurrencyObject } from '@automattic/number-formatters';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { LoadingPlaceholder } from '@automattic/jetpack-components';
+import LoadingPlaceholder from '../loading-placeholder/index.tsx';
 import TermsOfService from '../terms-of-service/index.tsx';
 import type { PricingCardProps } from './types.ts';
 import type { CurrencyObject } from '@automattic/number-formatters';

package/components/terms-of-service/index.tsx

@@ -2,7 +2,11 @@ import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
-import { getRedirectUrl } from '../../index.ts';
+// Deep import rather than the package barrel (`../../index.ts`): the barrel
+// pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
+// wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
+// that deep-imports pricing-table (which renders TermsOfService).
+import getRedirectUrl from '../../tools/jp-redirect/index.ts';
 import Text from '../text/index.tsx';
 import type { TermsOfServiceProps } from './types.ts';
 import type { FC, ReactNode } from 'react';

package/components/upsell-banner/index.tsx

@@ -1,6 +1,6 @@
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Button } from '@automattic/jetpack-components';
+import Button from '../button/index.tsx';
 import { UpsellBannerProps } from './types.ts';
 import type { FC, ReactNode } from 'react';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.11.2",
+	"version": "1.12.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -26,6 +26,10 @@
 			"types": "./build/components/admin-page/index.d.ts",
 			"default": "./build/components/admin-page/index.js"
 		},
+		"./button": {
+			"types": "./build/components/button/index.d.ts",
+			"default": "./build/components/button/index.js"
+		},
 		"./global-notices": {
 			"types": "./build/components/global-notices/index.d.ts",
 			"default": "./build/components/global-notices/index.js"
@@ -42,6 +46,14 @@
 			"types": "./build/components/jetpack-logo/index.d.ts",
 			"default": "./build/components/jetpack-logo/index.js"
 		},
+		"./pricing-table": {
+			"types": "./build/components/pricing-table/index.d.ts",
+			"default": "./build/components/pricing-table/index.js"
+		},
+		"./product-price": {
+			"types": "./build/components/product-price/index.d.ts",
+			"default": "./build/components/product-price/index.js"
+		},
 		"./tools/jp-redirect": {
 			"types": "./build/tools/jp-redirect/index.d.ts",
 			"default": "./build/tools/jp-redirect/index.js"
@@ -61,38 +73,38 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.25",
-		"@automattic/jetpack-boost-score-api": "^1.0.42",
+		"@automattic/jetpack-api": "^1.0.26",
+		"@automattic/jetpack-boost-score-api": "^1.0.43",
 		"@automattic/jetpack-script-data": "^0.6.4",
-		"@automattic/number-formatters": "^1.1.8",
+		"@automattic/number-formatters": "^1.2.0",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/admin-ui": "2.0.0",
-		"@wordpress/browserslist-config": "6.44.0",
-		"@wordpress/components": "32.6.0",
-		"@wordpress/compose": "7.44.0",
-		"@wordpress/data": "10.44.0",
-		"@wordpress/date": "5.44.0",
-		"@wordpress/element": "6.44.0",
-		"@wordpress/i18n": "6.17.0",
+		"@wordpress/admin-ui": "2.1.0",
+		"@wordpress/browserslist-config": "6.46.0",
+		"@wordpress/components": "33.1.0",
+		"@wordpress/compose": "7.46.0",
+		"@wordpress/data": "10.46.0",
+		"@wordpress/date": "5.46.0",
+		"@wordpress/element": "6.46.0",
+		"@wordpress/i18n": "6.19.0",
 		"@wordpress/icons": "12.2.0",
-		"@wordpress/notices": "5.44.0",
-		"@wordpress/theme": "0.11.0",
+		"@wordpress/notices": "5.46.0",
+		"@wordpress/theme": "0.13.0",
 		"@wordpress/ui": "0.11.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.15",
+		"social-logos": "^3.3.16",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.3",
+		"@automattic/jetpack-base-styles": "^1.2.4",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
-		"@jest/globals": "30.3.0",
+		"@jest/globals": "30.4.1",
 		"@storybook/addon-docs": "10.3.6",
 		"@storybook/react": "10.3.6",
 		"@testing-library/dom": "10.4.1",
@@ -103,7 +115,7 @@
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
-		"jest": "30.3.0",
+		"jest": "30.4.2",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",