@automattic/jetpack-components 0.73.1 → 0.73.2

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [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 +1400,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[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/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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.73.1",
+	"version": "0.73.2",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.64",
+		"@automattic/jetpack-boost-score-api": "^0.1.65",
 		"@automattic/jetpack-api": "^0.20.2",
 		"@automattic/jetpack-script-data": "^0.4.1",
 		"@automattic/number-formatters": "^1.0.2",