@automattic/jetpack-components 0.73.1 → 0.73.4

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.73.4] - 2025-06-02
+### Added
+- Added className prop to AdminPage component. [#43592]
+
+### Changed
+- sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. [#43607]
+
+## [0.73.3] - 2025-05-26
+### Changed
+- Update package dependencies. [#43578]
+
+## [0.73.2] - 2025-05-22
+### Fixed
+- Fixed Swipeable width being stale on window resize. [#43510]
+
 ## [0.73.1] - 2025-05-19
 ### Changed
 - Update dependencies.
@@ -1396,6 +1411,9 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.73.4]: https://github.com/Automattic/jetpack-components/compare/0.73.3...0.73.4
+[0.73.3]: https://github.com/Automattic/jetpack-components/compare/0.73.2...0.73.3
+[0.73.2]: https://github.com/Automattic/jetpack-components/compare/0.73.1...0.73.2
 [0.73.1]: https://github.com/Automattic/jetpack-components/compare/0.73.0...0.73.1
 [0.73.0]: https://github.com/Automattic/jetpack-components/compare/0.72.6...0.73.0
 [0.72.6]: https://github.com/Automattic/jetpack-components/compare/0.72.5...0.72.6

package/build/components/admin-page/index.js

@@ -16,12 +16,12 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {React.ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
+const AdminPage = ({ children, className, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
     useEffect(() => {
         restApi.setApiRoot(apiRoot);
         restApi.setApiNonce(apiNonce);
     }, [apiRoot, apiNonce]);
-    const rootClassName = clsx(styles['admin-page'], {
+    const rootClassName = clsx(styles['admin-page'], className, {
         [styles.background]: showBackground,
     });
     const testConnection = useCallback(async () => {

package/build/components/admin-page/types.d.ts

@@ -52,4 +52,8 @@ export type AdminPageProps = {
      * Optional menu items to be displayed
      */
     optionalMenuItems?: JetpackFooterMenuItem[];
+    /**
+     * Class name to be applied to the root element of the component.
+     */
+    className?: string;
 };

package/build/components/swipeable/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import clsx from 'clsx';
 import { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
 import './style.scss';
@@ -274,7 +275,10 @@ export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0,
         return null;
     }, [handleDragStart, handleDrag, handleDragEnd]);
     const offset = getOffset(currentPage);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps, children: _jsxs("div", { className: clsx('swipeable__pages', containerClassName), style: {
+    return (_jsxs(_Fragment, { children: [_createElement("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps, 
+                // Ensure that state is reset when the window is resized
+                key: containerWidth?.toString() },
+                _jsxs("div", { className: clsx('swipeable__pages', containerClassName), style: {
                         ...pagesStyle,
                         width: getPagesWidth(containerWidth, numPages + 2),
                         transform: `translate3d(${offset}px, 0px, 0px)`,
@@ -288,6 +292,6 @@ export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0,
                             }), "data-testid": `swipeable-page-${index + 1}`, children: child }, `page-${index}`))), _jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
                                 'is-clone': true,
                                 'is-next': currentPage === numPages - 1,
-                            }), children: Children.toArray(children)[0] }, `clone-next-0`)] }) }), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })] }));
+                            }), children: Children.toArray(children)[0] }, `clone-next-0`)] })), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })] }));
 };
 export default Swipeable;

package/components/admin-page/index.tsx

@@ -20,6 +20,7 @@ import type React from 'react';
  */
 const AdminPage: React.FC< AdminPageProps > = ( {
 	children,
+	className,
 	moduleName = __( 'Jetpack', 'jetpack-components' ),
 	moduleNameHref,
 	showHeader = true,
@@ -37,7 +38,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 		restApi.setApiNonce( apiNonce );
 	}, [ apiRoot, apiNonce ] );
 
-	const rootClassName = clsx( styles[ 'admin-page' ], {
+	const rootClassName = clsx( styles[ 'admin-page' ], className, {
 		[ styles.background ]: showBackground,
 	} );
 

package/components/admin-page/types.ts

@@ -65,4 +65,9 @@ export type AdminPageProps = {
 	 * Optional menu items to be displayed
 	 */
 	optionalMenuItems?: JetpackFooterMenuItem[];
+
+	/**
+	 * Class name to be applied to the root element of the component.
+	 */
+	className?: string;
 };

package/components/decorative-card/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 .jp-components__decorative-card {
 	display: flex;

package/components/dot-pager/style.scss

@@ -1,5 +1,5 @@
-@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
-@import '@automattic/jetpack-base-styles/root-variables';
+@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
+@use '@automattic/jetpack-base-styles/root-variables';
 
 .dot-pager {
 	width: 100%;
@@ -10,10 +10,10 @@
 .dot-pager__page {
 	height: 100%;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
-
-	@include reduce-motion( "transition" );
 	opacity: 1;
 	visibility: visible;
+
+	@include gb.reduce-motion( "transition" );
 }
 
 .dot-pager__controls {

package/components/global-notices/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
 
 .global-notices {
 
@@ -10,14 +10,14 @@
 		// Modals have 100000, so this needs to be above them
 		z-index: 100001;
 
-		@include break-small {
+		@include gb.break-small {
 			width: auto;
 			inset-inline: unset; // left and right
 			inset-block-start: 4rem;
 			inset-inline-end: 1rem;
 		}
 
-		@include break-medium {
+		@include gb.break-medium {
 			inset-block-start: 3rem;
 		}
 	}

package/components/icon-tooltip/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 $arrow-color: var( --jp-gray );
 

package/components/icons/style.module.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
 
 .star-icon {
 	fill: #000;
@@ -10,7 +10,7 @@
 }
 
 .socialIcon {
-	fill: $gray-700;
+	fill: gb.$gray-700;
 
 	&.bluesky {
 		fill: var( --color-bluesky );

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

@@ -1,9 +1,9 @@
 @use "sass:map";
-@import "../breakpoints.module";
+@use "../breakpoints.module" as breakpoints;
 
 @mixin cols($size) {
 
-	@include media($size) using ($columns) {
+	@include breakpoints.media($size) using ($columns) {
 
 		@for $i from 1 through $columns {
 			.col-#{$size}-#{$i} {
@@ -24,7 +24,7 @@
 @include cols("lg");
 
 :export {
-	smCols: map.get($cols-sizes, "sm");
-	mdCols: map.get($cols-sizes, "md");
-	lgCols: map.get($cols-sizes, "lg");
+	smCols: map.get(breakpoints.$cols-sizes, "sm");
+	mdCols: map.get(breakpoints.$cols-sizes, "md");
+	lgCols: map.get(breakpoints.$cols-sizes, "lg");
 }

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

@@ -1,11 +1,11 @@
 @use "sass:map";
-@import "../breakpoints.module";
+@use "../breakpoints.module" as breakpoints;
 
 @mixin container($size) {
 	$paddings: ("sm": "16px", "md": "18px", "lg": "24px");
 	$padding: map.get($paddings, #{$size});
 
-	@include media(#{$size}) using ($columns) {
+	@include breakpoints.media(#{$size}) using ($columns) {
 		padding: 0 #{$padding};
 		grid-template-columns: repeat( #{$columns}, minmax(0, 1fr) );
 	}

package/components/number-slider/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 $thumb-height: 40px;
 $track-height: 8px;

package/components/pricing-card/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/style';
+@use '@automattic/jetpack-base-styles/style';
 
 .jp-components__pricing-card {
 	width: -moz-fit-content;

package/components/swipeable/index.tsx

@@ -366,6 +366,8 @@ export const Swipeable = ( {
 				className="swipeable__container"
 				ref={ pagesRef }
 				{ ...otherProps }
+				// Ensure that state is reset when the window is resized
+				key={ containerWidth?.toString() }
 			>
 				<div
 					className={ clsx( 'swipeable__pages', containerClassName ) }

package/components/swipeable/style.scss

@@ -1,4 +1,4 @@
-@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
 
 .swipeable__container {
 	width: 100%;
@@ -19,7 +19,7 @@
 	transition: all 0.5s ease-in-out;
 	transition-property: transform, height;
 
-	@include reduce-motion( "transition" );
+	@include gb.reduce-motion( "transition" );
 }
 
 .swipeable__page {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.73.1",
+	"version": "0.73.4",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,20 +15,20 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.64",
-		"@automattic/jetpack-api": "^0.20.2",
-		"@automattic/jetpack-script-data": "^0.4.1",
+		"@automattic/jetpack-boost-score-api": "^0.1.67",
+		"@automattic/jetpack-api": "^0.20.3",
+		"@automattic/jetpack-script-data": "^0.4.2",
 		"@automattic/number-formatters": "^1.0.2",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.22.0",
-		"@wordpress/components": "29.8.0",
-		"@wordpress/compose": "7.22.0",
-		"@wordpress/data": "10.22.0",
-		"@wordpress/date": "5.22.0",
-		"@wordpress/element": "6.22.0",
-		"@wordpress/i18n": "5.22.0",
-		"@wordpress/icons": "10.22.0",
-		"@wordpress/notices": "5.22.0",
+		"@wordpress/browserslist-config": "6.24.0",
+		"@wordpress/components": "29.10.0",
+		"@wordpress/compose": "7.24.0",
+		"@wordpress/data": "10.24.0",
+		"@wordpress/date": "5.24.0",
+		"@wordpress/element": "6.24.0",
+		"@wordpress/i18n": "5.24.0",
+		"@wordpress/icons": "10.24.0",
+		"@wordpress/notices": "5.24.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
@@ -38,7 +38,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.7.4",
+		"@automattic/jetpack-base-styles": "^0.8.0",
 		"@babel/core": "7.26.10",
 		"@babel/preset-react": "7.26.3",
 		"@jest/globals": "29.7.0",