@automattic/jetpack-components 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [2.3.0] - 2026-09-01
+### Added
+- Upsell Banner: Add an optional dismiss button. [#51441]
+
+### Changed
+- Update package dependencies. [#51303] [#51802]
+
 ## [2.2.0] - 2026-08-19
 ### Added
 - Gravatar: pick a stable Color Studio background color per email for initials identity avatars via bg_color [#50578]
@@ -1905,6 +1912,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[2.3.0]: https://github.com/Automattic/jetpack-components/compare/2.2.0...2.3.0
 [2.2.0]: https://github.com/Automattic/jetpack-components/compare/2.1.1...2.2.0
 [2.1.1]: https://github.com/Automattic/jetpack-components/compare/2.1.0...2.1.1
 [2.1.0]: https://github.com/Automattic/jetpack-components/compare/2.0.1...2.1.0

package/build/components/action-button/index.d.ts

@@ -1,4 +1,4 @@
-declare function ActionButton(props: any): import("react/jsx-runtime").JSX.Element;
+declare function ActionButton(props: any): import("react").JSX.Element;
 declare namespace ActionButton {
     var propTypes: {
         /** The button label. */

package/build/components/action-popover/index.d.ts

@@ -2,5 +2,5 @@
  * Types
  */
 import { ActionPopoverProps } from './types.ts';
-declare const ActionPopover: ({ hideCloseButton, title, children, step, totalSteps, buttonContent, buttonDisabled, buttonHref, buttonExternalLink, offset, onClose, onClick, ...otherPopoverProps }: ActionPopoverProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionPopover: ({ hideCloseButton, title, children, step, totalSteps, buttonContent, buttonDisabled, buttonHref, buttonExternalLink, offset, onClose, onClick, ...otherPopoverProps }: ActionPopoverProps) => import("react").JSX.Element;
 export default ActionPopover;

package/build/components/boost-score-graph/uplot-line-chart.d.ts

@@ -23,5 +23,5 @@ interface UplotChartProps {
  * @param {Annotation[]}                           props.annotations - The annotations to display in the chart.
  * @return {ReactElement} The JSX element representing the UplotLineChart component.
  */
-export default function UplotLineChart({ range, periods, annotations }: UplotChartProps): import("react/jsx-runtime").JSX.Element;
+export default function UplotLineChart({ range, periods, annotations }: UplotChartProps): import("react").JSX.Element;
 export {};

package/build/components/decorative-card/index.d.ts

@@ -20,5 +20,5 @@ export interface DecorativeCardProps extends Omit<ComponentProps<'div'>, 'childr
  * @param {DecorativeCardProps} props - The properties.
  * @return {import('react').ReactNode} - The DecorativeCard component.
  */
-declare function DecorativeCard({ format, icon, imageUrl, className, ...rest }: DecorativeCardProps): import("react/jsx-runtime").JSX.Element;
+declare function DecorativeCard({ format, icon, imageUrl, className, ...rest }: DecorativeCardProps): import("react").JSX.Element;
 export default DecorativeCard;

package/build/components/details-viewer/index.d.ts

@@ -7,5 +7,5 @@
  */
 declare const DetailsViewer: ({ details }: {
     details: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DetailsViewer;

package/build/components/diff-viewer/index.d.ts

@@ -1,4 +1,4 @@
 export declare const DiffViewer: ({ diff }: {
     diff: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DiffViewer;

package/build/components/dot-pager/index.d.ts

@@ -10,5 +10,5 @@ type DotPagerProps = {
     tracksPrefix?: string;
     tracksFn?: (eventName: string, data?: Record<string, unknown>) => void;
 };
-declare const DotPager: ({ hasDynamicHeight, children, className, onPageSelected, isClickEnabled, rotateTime, tracksPrefix, tracksFn, ...props }: DotPagerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DotPager: ({ hasDynamicHeight, children, className, onPageSelected, isClickEnabled, rotateTime, tracksPrefix, tracksFn, ...props }: DotPagerProps) => import("react").JSX.Element;
 export default DotPager;

package/build/components/global-notices/global-notices.d.ts

@@ -8,4 +8,4 @@ export type GlobalNoticesProps = {
  *
  * @return {import('react').ReactNode} The rendered notices list.
  */
-export declare function GlobalNotices({ maxVisibleNotices }: GlobalNoticesProps): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalNotices({ maxVisibleNotices }: GlobalNoticesProps): import("react").JSX.Element;

package/build/components/loading-placeholder/index.d.ts

@@ -4,5 +4,5 @@ declare const LoadingPlaceholder: ({ children, width, height, className, }: {
     width?: number | string;
     height?: number;
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default LoadingPlaceholder;

package/build/components/marked-lines/index.d.ts

@@ -1,4 +1,4 @@
 declare const MarkedLines: ({ context }: {
     context: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default MarkedLines;

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

@@ -12,4 +12,4 @@ export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
  *
  * @return The rendered footer.
  */
-export declare function Footer({ children, actions, isScreenLocked, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ children, actions, isScreenLocked, className, ...props }: FooterProps): import("react").JSX.Element;

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

@@ -26,4 +26,4 @@ export type HeaderProps = {
  *
  * @return component
  */
-export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp, }: HeaderProps): import("react").JSX.Element;

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

@@ -11,7 +11,7 @@ type NavigatorModalProps = Omit<ModalProps, 'onRequestClose'> & TNavigatorModalC
  *
  * @return Component
  */
-declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, ...props }: NavigatorModalProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, ...props }: NavigatorModalProps): import("react").JSX.Element;
 export declare const NavigatorModal: typeof NavigatorModalMain & {
     Screen: typeof Screen & {
         displayName: string;

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

@@ -42,4 +42,4 @@ export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'c
  *
  * @return The rendered screen.
  */
-export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react").JSX.Element;

package/build/components/stat-card/index.d.ts

@@ -5,5 +5,5 @@ import { StatCardProps } from './types.ts';
  * @param {StatCardProps} props - Component props.
  * @return {ReactNode} - StatCard react component.
  */
-declare const StatCard: ({ className, hideValue, icon, label, value, variant, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatCard: ({ className, hideValue, icon, label, value, variant, }: StatCardProps) => import("react").JSX.Element;
 export default StatCard;

package/build/components/swipeable/index.d.ts

@@ -8,5 +8,5 @@ export declare const Swipeable: ({ hasDynamicHeight, children, currentPage, onPa
     isClickEnabled: any;
     onPageSelect: any;
     pageClassName: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Swipeable;

package/build/components/upsell-banner/index.d.ts

@@ -6,6 +6,7 @@ import './style.scss';
  *
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
+ * - Passing `onDismiss` renders a close button in the top corner of the banner.
  *
  * @param {UpsellBannerProps} props - Component props.
  * @return {ReactNode} - UpsellBanner component.

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

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
 import Button from '../button/index.js';
 import './style.scss';
 /**
@@ -8,13 +10,17 @@ import './style.scss';
  *
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
+ * - Passing `onDismiss` renders a close button in the top corner of the banner.
  *
  * @param {UpsellBannerProps} props - Component props.
  * @return {ReactNode} - UpsellBanner component.
  */
 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, {
+    const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, onDismiss, dismissLabel, } = props;
+    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [onDismiss && (_jsx(Button, { className: "upsell-banner--dismiss", variant: "tertiary", size: "small", icon: close, iconSize: 16, 
+                    // Button wraps its children in a span, so the tooltip an icon-only
+                    // WPButton would show on its own has to be asked for explicitly.
+                    showTooltip: true, label: dismissLabel || __('Dismiss', 'jetpack-components'), onClick: onDismiss })), 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 }))] })] })] }) }));
 };

package/build/components/upsell-banner/style.scss

@@ -5,6 +5,7 @@
 .upsell-banner {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 
 	background: rgb(249, 249, 246);
 	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);
@@ -18,6 +19,13 @@
 		padding: 36px;
 	}
 
+	.upsell-banner--dismiss.components-button {
+		position: absolute;
+		inset-block-start: 8px;
+		inset-inline-end: 8px;
+		color: var(--jp-gray-60);
+	}
+
 	.upsell-banner--icon {
 		display: flex;
 		align-items: flex-start;

package/build/components/upsell-banner/types.d.ts

@@ -10,4 +10,8 @@ export type UpsellBannerProps = {
     secondaryCtaURL?: string;
     secondaryCtaIsExternalLink?: boolean;
     secondaryCtaOnClick?: () => void;
+    /** Renders a dismiss button in the top corner of the banner when provided. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. Defaults to "Dismiss". */
+    dismissLabel?: string;
 };

package/components/upsell-banner/index.tsx

@@ -1,5 +1,7 @@
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
 import Button from '../button/index.tsx';
 import { UpsellBannerProps } from './types.ts';
 import type { FC, ReactNode } from 'react';
@@ -11,6 +13,7 @@ import './style.scss';
  *
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
+ * - Passing `onDismiss` renders a close button in the top corner of the banner.
  *
  * @param {UpsellBannerProps} props - Component props.
  * @return {ReactNode} - UpsellBanner component.
@@ -28,11 +31,27 @@ const UpsellBanner: FC< UpsellBannerProps > = props => {
 		secondaryCtaURL,
 		secondaryCtaIsExternalLink,
 		secondaryCtaOnClick,
+		onDismiss,
+		dismissLabel,
 	} = props;
 
 	return (
 		<Card isRounded={ true } size="large">
 			<CardBody className="upsell-banner" size="large">
+				{ onDismiss && (
+					<Button
+						className="upsell-banner--dismiss"
+						variant="tertiary"
+						size="small"
+						icon={ close }
+						iconSize={ 16 }
+						// Button wraps its children in a span, so the tooltip an icon-only
+						// WPButton would show on its own has to be asked for explicitly.
+						showTooltip={ true }
+						label={ dismissLabel || __( 'Dismiss', 'jetpack-components' ) }
+						onClick={ onDismiss }
+					/>
+				) }
 				{ icon && (
 					<div className="upsell-banner--icon">
 						<img src={ icon } alt="" />

package/components/upsell-banner/style.scss

@@ -5,6 +5,7 @@
 .upsell-banner {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 
 	background: rgb(249, 249, 246);
 	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);
@@ -18,6 +19,13 @@
 		padding: 36px;
 	}
 
+	.upsell-banner--dismiss.components-button {
+		position: absolute;
+		inset-block-start: 8px;
+		inset-inline-end: 8px;
+		color: var(--jp-gray-60);
+	}
+
 	.upsell-banner--icon {
 		display: flex;
 		align-items: flex-start;

package/components/upsell-banner/types.ts

@@ -10,4 +10,8 @@ export type UpsellBannerProps = {
 	secondaryCtaURL?: string;
 	secondaryCtaIsExternalLink?: boolean;
 	secondaryCtaOnClick?: () => void;
+	/** Renders a dismiss button in the top corner of the banner when provided. */
+	onDismiss?: () => void;
+	/** Accessible label for the dismiss button. Defaults to "Dismiss". */
+	dismissLabel?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -74,28 +74,28 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-api": "^1.0.32",
-		"@automattic/jetpack-boost-score-api": "^1.0.55",
+		"@automattic/jetpack-boost-score-api": "^1.0.56",
 		"@automattic/jetpack-script-data": "^0.6.6",
-		"@automattic/number-formatters": "^1.2.7",
+		"@automattic/number-formatters": "^1.2.8",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/admin-ui": "2.7.0",
+		"@wordpress/admin-ui": "2.8.0",
 		"@wordpress/browserslist-config": "6.51.0",
 		"@wordpress/components": "37.0.0",
-		"@wordpress/compose": "8.4.0",
+		"@wordpress/compose": "8.6.0",
 		"@wordpress/data": "10.51.0",
 		"@wordpress/date": "5.51.0",
 		"@wordpress/element": "8.3.0",
 		"@wordpress/i18n": "6.24.0",
-		"@wordpress/icons": "15.3.0",
+		"@wordpress/icons": "15.4.0",
 		"@wordpress/notices": "5.51.0",
-		"@wordpress/theme": "1.1.0",
-		"@wordpress/ui": "0.19.0",
+		"@wordpress/theme": "1.2.0",
+		"@wordpress/ui": "0.20.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.3.18",
+		"social-logos": "^3.3.19",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
@@ -109,7 +109,7 @@
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
-		"@types/react": "18.3.28",
+		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.4.2",