@automattic/jetpack-components 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [6.2.0] - 2026-11-04
+### Added
+- Add a SidebarFooter component for actions pinned to the bottom of a sidebar. [#54229]
+
+### Changed
+- Gravatar Hovercards: Update @gravatar-com/hovercards to 0.17.0, which adds defensive escaping of Gravatar profile data. [#54379]
+- StatCard: Use the design system tooltip. [#54512]
+- Update package dependencies. [#54512]
+
+### Fixed
+- JetpackFooter: Keep the footer styles in production builds. [#54512]
+
 ## [6.1.1] - 2026-11-02
 ### Changed
 - Update package dependencies. [#53869]
@@ -2051,6 +2063,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[6.2.0]: https://github.com/Automattic/jetpack-components/compare/6.1.1...6.2.0
 [6.1.1]: https://github.com/Automattic/jetpack-components/compare/6.1.0...6.1.1
 [6.1.0]: https://github.com/Automattic/jetpack-components/compare/6.0.0...6.1.0
 [6.0.0]: https://github.com/Automattic/jetpack-components/compare/5.0.1...6.0.0

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

@@ -1,2 +1,5 @@
 import './style.scss';
-export { default } from './jetpack-footer.tsx';
+import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
+declare const JetpackFooter: FC<JetpackFooterProps>;
+export default JetpackFooter;

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

@@ -1,2 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import './style.scss';
-export { default } from './jetpack-footer.js';
+import UnstyledJetpackFooter from './jetpack-footer.js';
+// A pure re-export would let bundlers that honour `sideEffects` drop the style import above.
+const JetpackFooter = props => _jsx(UnstyledJetpackFooter, { ...props });
+export default JetpackFooter;

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

@@ -9,10 +9,10 @@ declare global {
     }
 }
 /**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ * UnstyledJetpackFooter displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right, without loading its stylesheet.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
+ * @return {ReactNode} UnstyledJetpackFooter component.
  */
-declare const JetpackFooter: FC<JetpackFooterProps>;
-export default JetpackFooter;
+declare const UnstyledJetpackFooter: FC<JetpackFooterProps>;
+export default UnstyledJetpackFooter;

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

@@ -7,12 +7,12 @@ import getRedirectUrl from '../../tools/jp-redirect/index.js';
 import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
 import JetpackLogo from '../jetpack-logo/index.js';
 /**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ * UnstyledJetpackFooter displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right, without loading its stylesheet.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
+ * @return {ReactNode} UnstyledJetpackFooter component.
  */
-const JetpackFooter = ({ className, menu, ...otherProps }) => {
+const UnstyledJetpackFooter = ({ className, menu, ...otherProps }) => {
     let items = [];
     if (getScriptData()?.myJetpack?.isAvailable === true &&
         !isWpcomPlatformSite() &&
@@ -36,4 +36,4 @@ const JetpackFooter = ({ className, menu, ...otherProps }) => {
                     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 }) })] }));
 };
-export default JetpackFooter;
+export default UnstyledJetpackFooter;

package/build/components/sidebar-footer/index.d.ts

@@ -0,0 +1,12 @@
+import type { SidebarFooterProps } from './types.ts';
+import type { JSX } from 'react';
+/**
+ * Actions pinned to the bottom of a sidebar, with the content scrolling under them.
+ *
+ * Render it last inside a flex column that fills the sidebar. Use `@wordpress/ui` buttons at
+ * their default size, which is 40px tall.
+ *
+ * @param {SidebarFooterProps} props - Component props.
+ * @return {JSX.Element} The footer.
+ */
+export default function SidebarFooter({ children, description, className, }: SidebarFooterProps): JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './style.module.scss';
+/**
+ * Actions pinned to the bottom of a sidebar, with the content scrolling under them.
+ *
+ * Render it last inside a flex column that fills the sidebar. Use `@wordpress/ui` buttons at
+ * their default size, which is 40px tall.
+ *
+ * @param {SidebarFooterProps} props - Component props.
+ * @return {JSX.Element} The footer.
+ */
+export default function SidebarFooter({ children, description, className, }) {
+    return (_jsxs("div", { className: clsx(styles.footer, className), children: [description, _jsx("div", { className: styles.actions, children: children })] }));
+}

package/build/components/sidebar-footer/style.module.scss

@@ -0,0 +1,24 @@
+.footer {
+	position: sticky;
+	inset-block-end: 0;
+	// Above positioned content scrolling under it, such as the hidden checkbox
+	// of wp-components toggles before 33.0, which would take the footer's clicks.
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
+	margin-block-start: auto;
+	// Matches the admin-ui Page title bar, lining the actions up with the content.
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+	border-block-start:
+		var(--wpds-border-width-xs) solid
+		var(--wpds-color-stroke-surface-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+}
+
+.actions {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	gap: var(--wpds-dimension-gap-sm);
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type SidebarFooterProps = {
+    /**
+     * The actions, usually one or two buttons. Each gets an equal-width column and fills it.
+     */
+    children: ReactNode;
+    /**
+     * Shown above the actions, such as a note on what an action is doing.
+     */
+    description?: ReactNode;
+    /**
+     * Extra class name for the footer.
+     */
+    className?: string;
+};

package/build/components/sidebar-footer/types.js

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

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * External dependencies
  */
 import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
-import { Tooltip } from '@wordpress/components';
+import { Tooltip } from '@wordpress/ui';
 import clsx from 'clsx';
 /**
  * Internal dependencies
@@ -19,6 +19,6 @@ import styles from './style.module.scss';
 const StatCard = ({ className, hideValue, icon, label, value, variant = 'square', }) => {
     const formattedValue = formatNumber(value);
     const compactValue = formatNumberCompact(value);
-    return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [_jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [_jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsx(Tooltip, { text: formattedValue, placement: "top", children: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })] }));
+    return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [_jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [_jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { render: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) }), _jsx(Tooltip.Popup, { children: formattedValue })] })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })] }));
 };
 export default StatCard;

package/build/index.d.ts

@@ -52,5 +52,7 @@ export type { PeriodPreset, PeriodSelectorProps } from './components/period-sele
 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 { default as SidebarFooter } from './components/sidebar-footer/index.tsx';
+export type { SidebarFooterProps } from './components/sidebar-footer/types.ts';
 export * from './components/global-notices/index.ts';
 export * from './components/navigator-modal/index.tsx';

package/build/index.js

@@ -61,5 +61,6 @@ export { default as PeriodSelector } from './components/period-selector/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 { default as SidebarFooter } from './components/sidebar-footer/index.js';
 export * from './components/global-notices/index.js';
 export * from './components/navigator-modal/index.js';

package/components/jetpack-footer/index.tsx

@@ -1,3 +1,9 @@
 import './style.scss';
+import UnstyledJetpackFooter from './jetpack-footer.tsx';
+import type { JetpackFooterProps } from './types.ts';
+import type { FC } from 'react';
 
-export { default } from './jetpack-footer.tsx';
+// A pure re-export would let bundlers that honour `sideEffects` drop the style import above.
+const JetpackFooter: FC< JetpackFooterProps > = props => <UnstyledJetpackFooter { ...props } />;
+
+export default JetpackFooter;

package/components/jetpack-footer/jetpack-footer.tsx

@@ -18,12 +18,12 @@ declare global {
 }
 
 /**
- * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
+ * UnstyledJetpackFooter displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right, without loading its stylesheet.
  *
  * @param {JetpackFooterProps} props - Component properties.
- * @return {ReactNode} JetpackFooter component.
+ * @return {ReactNode} UnstyledJetpackFooter component.
  */
-const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
+const UnstyledJetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
 	let items: JetpackFooterMenuItem[] = [];
 
 	if (
@@ -110,4 +110,4 @@ const JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherPro
 	);
 };
 
-export default JetpackFooter;
+export default UnstyledJetpackFooter;

package/components/sidebar-footer/index.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import styles from './style.module.scss';
+import type { SidebarFooterProps } from './types.ts';
+import type { JSX } from 'react';
+
+/**
+ * Actions pinned to the bottom of a sidebar, with the content scrolling under them.
+ *
+ * Render it last inside a flex column that fills the sidebar. Use `@wordpress/ui` buttons at
+ * their default size, which is 40px tall.
+ *
+ * @param {SidebarFooterProps} props - Component props.
+ * @return {JSX.Element} The footer.
+ */
+export default function SidebarFooter( {
+	children,
+	description,
+	className,
+}: SidebarFooterProps ): JSX.Element {
+	return (
+		<div className={ clsx( styles.footer, className ) }>
+			{ description }
+			<div className={ styles.actions }>{ children }</div>
+		</div>
+	);
+}

package/components/sidebar-footer/style.module.scss

@@ -0,0 +1,24 @@
+.footer {
+	position: sticky;
+	inset-block-end: 0;
+	// Above positioned content scrolling under it, such as the hidden checkbox
+	// of wp-components toggles before 33.0, which would take the footer's clicks.
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
+	margin-block-start: auto;
+	// Matches the admin-ui Page title bar, lining the actions up with the content.
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+	border-block-start:
+		var(--wpds-border-width-xs) solid
+		var(--wpds-color-stroke-surface-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+}
+
+.actions {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	gap: var(--wpds-dimension-gap-sm);
+}

package/components/sidebar-footer/types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export type SidebarFooterProps = {
+	/**
+	 * The actions, usually one or two buttons. Each gets an equal-width column and fills it.
+	 */
+	children: ReactNode;
+	/**
+	 * Shown above the actions, such as a note on what an action is doing.
+	 */
+	description?: ReactNode;
+	/**
+	 * Extra class name for the footer.
+	 */
+	className?: string;
+};

package/components/stat-card/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
-import { Tooltip } from '@wordpress/components';
+import { Tooltip } from '@wordpress/ui';
 import clsx from 'clsx';
 /**
  * Internal dependencies
@@ -35,11 +35,16 @@ const StatCard = ( {
 			<div className={ clsx( styles.info ) }>
 				<Text className={ styles.label }>{ label }</Text>
 				{ variant === 'square' ? (
-					<Tooltip text={ formattedValue } placement="top">
-						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ hideValue ? '-' : compactValue }
-						</Text>
-					</Tooltip>
+					<Tooltip.Root>
+						<Tooltip.Trigger
+							render={
+								<Text variant="headline-small" className={ clsx( styles.value ) }>
+									{ hideValue ? '-' : compactValue }
+								</Text>
+							}
+						/>
+						<Tooltip.Popup>{ formattedValue }</Tooltip.Popup>
+					</Tooltip.Root>
 				) : (
 					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
 						{ hideValue ? '-' : formattedValue }

package/index.ts

@@ -72,5 +72,7 @@ export type { PeriodPreset, PeriodSelectorProps } from './components/period-sele
 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 { default as SidebarFooter } from './components/sidebar-footer/index.tsx';
+export type { SidebarFooterProps } from './components/sidebar-footer/types.ts';
 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": "6.1.1",
+	"version": "6.2.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -71,6 +71,10 @@
 			"types": "./build/components/radio-card/index.d.ts",
 			"default": "./build/components/radio-card/index.js"
 		},
+		"./sidebar-footer": {
+			"types": "./build/components/sidebar-footer/index.d.ts",
+			"default": "./build/components/sidebar-footer/index.js"
+		},
 		"./tools/jp-redirect": {
 			"types": "./build/tools/jp-redirect/index.d.ts",
 			"default": "./build/tools/jp-redirect/index.js"
@@ -89,26 +93,26 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/jetpack-api": "^2.2.4",
-		"@automattic/jetpack-boost-score-api": "^1.3.1",
+		"@automattic/jetpack-api": "^2.2.5",
+		"@automattic/jetpack-boost-score-api": "^1.3.2",
 		"@automattic/jetpack-script-data": "^0.6.12",
 		"@automattic/number-formatters": "^1.3.0",
 		"@babel/runtime": "^7",
-		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/a11y": "5.0.0",
-		"@wordpress/admin-ui": "3.0.0",
-		"@wordpress/browserslist-config": "7.0.0",
-		"@wordpress/components": "43.0.0",
-		"@wordpress/compose": "9.0.0",
-		"@wordpress/data": "11.0.0",
-		"@wordpress/date": "6.0.0",
-		"@wordpress/dom": "5.0.0",
-		"@wordpress/element": "10.0.0",
-		"@wordpress/i18n": "7.0.0",
-		"@wordpress/icons": "19.0.0",
-		"@wordpress/notices": "6.0.0",
-		"@wordpress/theme": "3.0.0",
-		"@wordpress/ui": "0.25.0",
+		"@gravatar-com/hovercards": "0.17.0",
+		"@wordpress/a11y": "5.1.0",
+		"@wordpress/admin-ui": "3.1.0",
+		"@wordpress/browserslist-config": "7.1.0",
+		"@wordpress/components": "44.0.0",
+		"@wordpress/compose": "9.1.0",
+		"@wordpress/data": "11.1.0",
+		"@wordpress/date": "6.1.0",
+		"@wordpress/dom": "5.1.0",
+		"@wordpress/element": "10.1.0",
+		"@wordpress/i18n": "7.1.0",
+		"@wordpress/icons": "20.0.0",
+		"@wordpress/notices": "6.1.0",
+		"@wordpress/theme": "4.0.0",
+		"@wordpress/ui": "0.26.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
@@ -130,7 +134,7 @@
 		"@types/react": "19.3.0",
 		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
-		"@wordpress/base-styles": "14.0.0",
+		"@wordpress/base-styles": "15.0.0",
 		"jest": "30.5.2",
 		"react": "19.3.0",
 		"react-dom": "19.3.0",