@automattic/jetpack-components 0.73.1 → 0.73.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/build/components/admin-page/index.js +2 -2
- package/build/components/admin-page/types.d.ts +4 -0
- package/build/components/swipeable/index.js +6 -2
- package/components/admin-page/index.tsx +2 -1
- package/components/admin-page/types.ts +5 -0
- package/components/decorative-card/style.scss +1 -1
- package/components/dot-pager/style.scss +4 -4
- package/components/global-notices/styles.module.scss +3 -3
- package/components/icon-tooltip/style.scss +1 -1
- package/components/icons/style.module.scss +2 -2
- package/components/layout/col/style.module.scss +5 -5
- package/components/layout/container/style.module.scss +2 -2
- package/components/number-slider/style.scss +1 -1
- package/components/pricing-card/style.scss +1 -1
- package/components/swipeable/index.tsx +2 -0
- package/components/swipeable/style.scss +2 -2
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.73.4] - 2025-06-02
|
|
6
|
+
### Added
|
|
7
|
+
- Added className prop to AdminPage component. [#43592]
|
|
8
|
+
|
|
9
|
+
### Changed
|
|
10
|
+
- sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. [#43607]
|
|
11
|
+
|
|
12
|
+
## [0.73.3] - 2025-05-26
|
|
13
|
+
### Changed
|
|
14
|
+
- Update package dependencies. [#43578]
|
|
15
|
+
|
|
16
|
+
## [0.73.2] - 2025-05-22
|
|
17
|
+
### Fixed
|
|
18
|
+
- Fixed Swipeable width being stale on window resize. [#43510]
|
|
19
|
+
|
|
5
20
|
## [0.73.1] - 2025-05-19
|
|
6
21
|
### Changed
|
|
7
22
|
- Update dependencies.
|
|
@@ -1396,6 +1411,9 @@
|
|
|
1396
1411
|
### Changed
|
|
1397
1412
|
- Update node version requirement to 14.16.1
|
|
1398
1413
|
|
|
1414
|
+
[0.73.4]: https://github.com/Automattic/jetpack-components/compare/0.73.3...0.73.4
|
|
1415
|
+
[0.73.3]: https://github.com/Automattic/jetpack-components/compare/0.73.2...0.73.3
|
|
1416
|
+
[0.73.2]: https://github.com/Automattic/jetpack-components/compare/0.73.1...0.73.2
|
|
1399
1417
|
[0.73.1]: https://github.com/Automattic/jetpack-components/compare/0.73.0...0.73.1
|
|
1400
1418
|
[0.73.0]: https://github.com/Automattic/jetpack-components/compare/0.72.6...0.73.0
|
|
1401
1419
|
[0.72.6]: https://github.com/Automattic/jetpack-components/compare/0.72.5...0.72.6
|
|
@@ -16,12 +16,12 @@ import styles from './style.module.scss';
|
|
|
16
16
|
* @param {AdminPageProps} props - Component properties.
|
|
17
17
|
* @return {React.ReactNode} AdminPage component.
|
|
18
18
|
*/
|
|
19
|
-
const AdminPage = ({ children, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
|
|
19
|
+
const AdminPage = ({ children, className, moduleName = __('Jetpack', 'jetpack-components'), moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, }) => {
|
|
20
20
|
useEffect(() => {
|
|
21
21
|
restApi.setApiRoot(apiRoot);
|
|
22
22
|
restApi.setApiNonce(apiNonce);
|
|
23
23
|
}, [apiRoot, apiNonce]);
|
|
24
|
-
const rootClassName = clsx(styles['admin-page'], {
|
|
24
|
+
const rootClassName = clsx(styles['admin-page'], className, {
|
|
25
25
|
[styles.background]: showBackground,
|
|
26
26
|
});
|
|
27
27
|
const testConnection = useCallback(async () => {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
2
3
|
import clsx from 'clsx';
|
|
3
4
|
import { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
|
|
4
5
|
import './style.scss';
|
|
@@ -274,7 +275,10 @@ export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0,
|
|
|
274
275
|
return null;
|
|
275
276
|
}, [handleDragStart, handleDrag, handleDragEnd]);
|
|
276
277
|
const offset = getOffset(currentPage);
|
|
277
|
-
return (_jsxs(_Fragment, { children: [
|
|
278
|
+
return (_jsxs(_Fragment, { children: [_createElement("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps,
|
|
279
|
+
// Ensure that state is reset when the window is resized
|
|
280
|
+
key: containerWidth?.toString() },
|
|
281
|
+
_jsxs("div", { className: clsx('swipeable__pages', containerClassName), style: {
|
|
278
282
|
...pagesStyle,
|
|
279
283
|
width: getPagesWidth(containerWidth, numPages + 2),
|
|
280
284
|
transform: `translate3d(${offset}px, 0px, 0px)`,
|
|
@@ -288,6 +292,6 @@ export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0,
|
|
|
288
292
|
}), "data-testid": `swipeable-page-${index + 1}`, children: child }, `page-${index}`))), _jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
|
|
289
293
|
'is-clone': true,
|
|
290
294
|
'is-next': currentPage === numPages - 1,
|
|
291
|
-
}), children: Children.toArray(children)[0] }, `clone-next-0`)] })
|
|
295
|
+
}), children: Children.toArray(children)[0] }, `clone-next-0`)] })), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })] }));
|
|
292
296
|
};
|
|
293
297
|
export default Swipeable;
|
|
@@ -20,6 +20,7 @@ import type React from 'react';
|
|
|
20
20
|
*/
|
|
21
21
|
const AdminPage: React.FC< AdminPageProps > = ( {
|
|
22
22
|
children,
|
|
23
|
+
className,
|
|
23
24
|
moduleName = __( 'Jetpack', 'jetpack-components' ),
|
|
24
25
|
moduleNameHref,
|
|
25
26
|
showHeader = true,
|
|
@@ -37,7 +38,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
|
|
|
37
38
|
restApi.setApiNonce( apiNonce );
|
|
38
39
|
}, [ apiRoot, apiNonce ] );
|
|
39
40
|
|
|
40
|
-
const rootClassName = clsx( styles[ 'admin-page' ], {
|
|
41
|
+
const rootClassName = clsx( styles[ 'admin-page' ], className, {
|
|
41
42
|
[ styles.background ]: showBackground,
|
|
42
43
|
} );
|
|
43
44
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
1
|
+
@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
|
|
2
|
+
@use '@automattic/jetpack-base-styles/root-variables';
|
|
3
3
|
|
|
4
4
|
.dot-pager {
|
|
5
5
|
width: 100%;
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
.dot-pager__page {
|
|
11
11
|
height: 100%;
|
|
12
12
|
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
|
|
13
|
-
|
|
14
|
-
@include reduce-motion( "transition" );
|
|
15
13
|
opacity: 1;
|
|
16
14
|
visibility: visible;
|
|
15
|
+
|
|
16
|
+
@include gb.reduce-motion( "transition" );
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.dot-pager__controls {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
|
|
2
2
|
|
|
3
3
|
.global-notices {
|
|
4
4
|
|
|
@@ -10,14 +10,14 @@
|
|
|
10
10
|
// Modals have 100000, so this needs to be above them
|
|
11
11
|
z-index: 100001;
|
|
12
12
|
|
|
13
|
-
@include break-small {
|
|
13
|
+
@include gb.break-small {
|
|
14
14
|
width: auto;
|
|
15
15
|
inset-inline: unset; // left and right
|
|
16
16
|
inset-block-start: 4rem;
|
|
17
17
|
inset-inline-end: 1rem;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
@include break-medium {
|
|
20
|
+
@include gb.break-medium {
|
|
21
21
|
inset-block-start: 3rem;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
|
|
2
2
|
|
|
3
3
|
.star-icon {
|
|
4
4
|
fill: #000;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.socialIcon {
|
|
13
|
-
fill:
|
|
13
|
+
fill: gb.$gray-700;
|
|
14
14
|
|
|
15
15
|
&.bluesky {
|
|
16
16
|
fill: var( --color-bluesky );
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
@
|
|
2
|
+
@use "../breakpoints.module" as breakpoints;
|
|
3
3
|
|
|
4
4
|
@mixin cols($size) {
|
|
5
5
|
|
|
6
|
-
@include media($size) using ($columns) {
|
|
6
|
+
@include breakpoints.media($size) using ($columns) {
|
|
7
7
|
|
|
8
8
|
@for $i from 1 through $columns {
|
|
9
9
|
.col-#{$size}-#{$i} {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
@include cols("lg");
|
|
25
25
|
|
|
26
26
|
:export {
|
|
27
|
-
smCols: map.get(
|
|
28
|
-
mdCols: map.get(
|
|
29
|
-
lgCols: map.get(
|
|
27
|
+
smCols: map.get(breakpoints.$cols-sizes, "sm");
|
|
28
|
+
mdCols: map.get(breakpoints.$cols-sizes, "md");
|
|
29
|
+
lgCols: map.get(breakpoints.$cols-sizes, "lg");
|
|
30
30
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
|
-
@
|
|
2
|
+
@use "../breakpoints.module" as breakpoints;
|
|
3
3
|
|
|
4
4
|
@mixin container($size) {
|
|
5
5
|
$paddings: ("sm": "16px", "md": "18px", "lg": "24px");
|
|
6
6
|
$padding: map.get($paddings, #{$size});
|
|
7
7
|
|
|
8
|
-
@include media(#{$size}) using ($columns) {
|
|
8
|
+
@include breakpoints.media(#{$size}) using ($columns) {
|
|
9
9
|
padding: 0 #{$padding};
|
|
10
10
|
grid-template-columns: repeat( #{$columns}, minmax(0, 1fr) );
|
|
11
11
|
}
|
|
@@ -366,6 +366,8 @@ export const Swipeable = ( {
|
|
|
366
366
|
className="swipeable__container"
|
|
367
367
|
ref={ pagesRef }
|
|
368
368
|
{ ...otherProps }
|
|
369
|
+
// Ensure that state is reset when the window is resized
|
|
370
|
+
key={ containerWidth?.toString() }
|
|
369
371
|
>
|
|
370
372
|
<div
|
|
371
373
|
className={ clsx( 'swipeable__pages', containerClassName ) }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
|
|
2
2
|
|
|
3
3
|
.swipeable__container {
|
|
4
4
|
width: 100%;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
transition: all 0.5s ease-in-out;
|
|
20
20
|
transition-property: transform, height;
|
|
21
21
|
|
|
22
|
-
@include reduce-motion( "transition" );
|
|
22
|
+
@include gb.reduce-motion( "transition" );
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.swipeable__page {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.73.
|
|
3
|
+
"version": "0.73.4",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -15,20 +15,20 @@
|
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@automattic/format-currency": "1.0.1",
|
|
18
|
-
"@automattic/jetpack-boost-score-api": "^0.1.
|
|
19
|
-
"@automattic/jetpack-api": "^0.20.
|
|
20
|
-
"@automattic/jetpack-script-data": "^0.4.
|
|
18
|
+
"@automattic/jetpack-boost-score-api": "^0.1.67",
|
|
19
|
+
"@automattic/jetpack-api": "^0.20.3",
|
|
20
|
+
"@automattic/jetpack-script-data": "^0.4.2",
|
|
21
21
|
"@automattic/number-formatters": "^1.0.2",
|
|
22
22
|
"@babel/runtime": "^7",
|
|
23
|
-
"@wordpress/browserslist-config": "6.
|
|
24
|
-
"@wordpress/components": "29.
|
|
25
|
-
"@wordpress/compose": "7.
|
|
26
|
-
"@wordpress/data": "10.
|
|
27
|
-
"@wordpress/date": "5.
|
|
28
|
-
"@wordpress/element": "6.
|
|
29
|
-
"@wordpress/i18n": "5.
|
|
30
|
-
"@wordpress/icons": "10.
|
|
31
|
-
"@wordpress/notices": "5.
|
|
23
|
+
"@wordpress/browserslist-config": "6.24.0",
|
|
24
|
+
"@wordpress/components": "29.10.0",
|
|
25
|
+
"@wordpress/compose": "7.24.0",
|
|
26
|
+
"@wordpress/data": "10.24.0",
|
|
27
|
+
"@wordpress/date": "5.24.0",
|
|
28
|
+
"@wordpress/element": "6.24.0",
|
|
29
|
+
"@wordpress/i18n": "5.24.0",
|
|
30
|
+
"@wordpress/icons": "10.24.0",
|
|
31
|
+
"@wordpress/notices": "5.24.0",
|
|
32
32
|
"clsx": "2.1.1",
|
|
33
33
|
"prop-types": "^15.7.2",
|
|
34
34
|
"qrcode.react": "4.2.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"uplot-react": "1.1.4"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@automattic/jetpack-base-styles": "^0.
|
|
41
|
+
"@automattic/jetpack-base-styles": "^0.8.0",
|
|
42
42
|
"@babel/core": "7.26.10",
|
|
43
43
|
"@babel/preset-react": "7.26.3",
|
|
44
44
|
"@jest/globals": "29.7.0",
|