@automattic/jetpack-components 1.11.1 → 1.11.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [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]
+
 ## [1.11.1] - 2026-05-14
 ### Changed
 - Update package dependencies. [#48696]
@@ -1784,6 +1794,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[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
 [1.10.0]: https://github.com/Automattic/jetpack-components/compare/1.9.0...1.10.0

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/status/index.d.ts

@@ -4,5 +4,16 @@ export interface StatusProps {
     label?: string;
     className?: string;
 }
+/**
+ * Status component.
+ *
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
+ *
+ * @param {StatusProps} props           - The component properties.
+ * @param {string}      props.className - Optional className forwarded to the outer element.
+ * @param {string}      props.label     - Status label. Defaults to a status-derived string.
+ * @param {string}      props.status    - Status key: `active | error | inactive | action | initializing`.
+ * @return {JSX.Element} The `Status` component.
+ */
 declare const Status: ({ className, label, status }: StatusProps) => JSX.Element;
 export default Status;

package/build/components/status/index.js

@@ -3,6 +3,17 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import Text from '../text/index.js';
 import styles from './style.module.scss';
+/**
+ * Status component.
+ *
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
+ *
+ * @param {StatusProps} props           - The component properties.
+ * @param {string}      props.className - Optional className forwarded to the outer element.
+ * @param {string}      props.label     - Status label. Defaults to a status-derived string.
+ * @param {string}      props.status    - Status key: `active | error | inactive | action | initializing`.
+ * @return {JSX.Element} The `Status` component.
+ */
 const Status = ({ className, label, status = 'inactive' }) => {
     const defaultLabels = {
         active: __('Active', 'jetpack-components'),

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/status/index.tsx

@@ -10,6 +10,17 @@ export interface StatusProps {
 	className?: string;
 }
 
+/**
+ * Status component.
+ *
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
+ *
+ * @param {StatusProps} props           - The component properties.
+ * @param {string}      props.className - Optional className forwarded to the outer element.
+ * @param {string}      props.label     - Status label. Defaults to a status-derived string.
+ * @param {string}      props.status    - Status key: `active | error | inactive | action | initializing`.
+ * @return {JSX.Element} The `Status` component.
+ */
 const Status = ( { className, label, status = 'inactive' }: StatusProps ): JSX.Element => {
 	const defaultLabels: Record< string, string > = {
 		active: __( 'Active', 'jetpack-components' ),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.11.1",
+	"version": "1.11.3",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -61,38 +61,38 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.24",
-		"@automattic/jetpack-boost-score-api": "^1.0.41",
-		"@automattic/jetpack-script-data": "^0.6.3",
-		"@automattic/number-formatters": "^1.1.7",
+		"@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.10",
 		"@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/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.14",
+		"social-logos": "^3.3.15",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.2",
+		"@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 +103,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",