@automattic/jetpack-components 1.11.3 → 1.12.0

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/build/components/admin-page/style.module.scss +25 -9
  3. package/build/components/pricing-card/index.js +1 -1
  4. package/build/components/terms-of-service/index.js +5 -1
  5. package/build/components/upsell-banner/index.js +1 -1
  6. package/components/admin-page/style.module.scss +25 -9
  7. package/components/pricing-card/index.tsx +1 -1
  8. package/components/terms-of-service/index.tsx +5 -1
  9. package/components/upsell-banner/index.tsx +1 -1
  10. package/package.json +16 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [1.12.0] - 2026-05-25
6
+ ### Added
7
+ - Add subpath exports for `Button`, `PricingTable`, and `ProductPrice` so they can be imported directly from bundles that cannot import the package barrel. [#49063]
8
+
9
+ ### Changed
10
+ - Replace self-imports via package name with relative imports to remove circular-dep risk. [#49096]
11
+
12
+ ### Fixed
13
+ - AdminPage: Update the header-height tab-shift rule so it keeps matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. [#49101]
14
+ - AdminPage: Keep header height consistent across tabs so the tab strip no longer shifts vertically when switching tabs. [#49080]
15
+ - AdminPage: Update the SCSS module's `> header` selectors to `> :first-child` so they keep matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. [#49018]
16
+
5
17
  ## [1.11.3] - 2026-05-21
6
18
  ### Changed
7
19
  - Mark ContextualUpgradeTrigger as @deprecated. Use Notice from @wordpress/ui instead. The implementation is unchanged. [#48909]
@@ -1794,6 +1806,7 @@
1794
1806
  ### Changed
1795
1807
  - Update node version requirement to 14.16.1
1796
1808
 
1809
+ [1.12.0]: https://github.com/Automattic/jetpack-components/compare/1.11.3...1.12.0
1797
1810
  [1.11.3]: https://github.com/Automattic/jetpack-components/compare/1.11.2...1.11.3
1798
1811
  [1.11.2]: https://github.com/Automattic/jetpack-components/compare/1.11.1...1.11.2
1799
1812
  [1.11.1]: https://github.com/Automattic/jetpack-components/compare/1.11.0...1.11.1
package/build/components/admin-page/style.module.scss CHANGED
@@ -15,15 +15,16 @@
15
15
  // https://github.com/WordPress/gutenberg/issues/75428
16
16
 
17
17
  // Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
18
- // <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
19
- // directly inside that page node — no class hooks anymore.
20
- &.without-bottom-border :global(.jp-admin-page__page > header) {
18
+ // <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
19
+ // in 2.0). Target it positionally as `> :first-child` so we don't couple
20
+ // to the element tag or admin-ui's CSS-Modules-hashed class names.
21
+ &.without-bottom-border :global(.jp-admin-page__page > :first-child) {
21
22
  border-bottom: none;
22
23
  }
23
24
 
24
25
  // Disable sticky header until we make it work better across all pages.
25
26
  // JETPACK-1386
26
- :global(.jp-admin-page__page > header) {
27
+ :global(.jp-admin-page__page > :first-child) {
27
28
  position: relative;
28
29
  z-index: 1;
29
30
  }
@@ -34,15 +35,30 @@
34
35
  clear: both;
35
36
  }
36
37
 
37
- // admin-ui 2.0.0's header `visual` slot is a 24px grid box but does not
38
- // center its contents. Our JetpackLogo is 20px tall, so without this it
39
- // pins to the top-left of the cell and looks misaligned vs. the title.
40
- // admin-ui ships the slot as `<div aria-hidden="true">` in the header.
38
+ // admin-ui's header `visual` slot is a 24px grid box but does not center
39
+ // its contents. Our JetpackLogo is 20px tall, so without this it pins to
40
+ // the top-left of the cell and looks misaligned vs. the title. admin-ui
41
+ // ships the slot as `<div aria-hidden="true">` in the header.
41
42
  // TODO: remove once upstream centers contents in `.header-visual`.
42
- :global(.jp-admin-page__page > header [aria-hidden="true"]) {
43
+ :global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
43
44
  place-items: center;
44
45
  }
45
46
 
47
+ // Keep the header a constant height across tabs. The content row's height
48
+ // is driven by its tallest child (the `actions` slot), so tabs with
49
+ // differently-sized action controls — or none at all — render headers of
50
+ // different heights, which shifts the tab strip below them vertically.
51
+ // Reserve the standard 40px WP control height as a floor and center the
52
+ // row's items so a shorter control neither stretches nor collapses it.
53
+ // The content row is identified by the visual logo slot it contains
54
+ // (`aria-hidden="true"`), so a breadcrumbs-only header isn't affected.
55
+ // `> :first-child` targets the page header positionally (a `<div>` in
56
+ // admin-ui ≥ 2.1, a `<header>` in 2.0) — matching the sibling rules above.
57
+ :global(.jp-admin-page__page > :first-child > div:has([aria-hidden="true"])) {
58
+ min-height: 40px;
59
+ align-items: center;
60
+ }
61
+
46
62
  .admin-page-header {
47
63
  display: flex;
48
64
  align-items: center;
package/build/components/pricing-card/index.js CHANGED
@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
2
2
  import { getCurrencyObject } from '@automattic/number-formatters';
3
3
  import { Button } from '@wordpress/components';
4
4
  import { sprintf, __ } from '@wordpress/i18n';
5
- import { LoadingPlaceholder } from '@automattic/jetpack-components';
5
+ import LoadingPlaceholder from '../loading-placeholder/index.js';
6
6
  import TermsOfService from '../terms-of-service/index.js';
7
7
  import './style.scss';
8
8
  /**
package/build/components/terms-of-service/index.js CHANGED
@@ -3,7 +3,11 @@ import { createInterpolateElement } from '@wordpress/element';
3
3
  import { __, sprintf } from '@wordpress/i18n';
4
4
  import { Link } from '@wordpress/ui';
5
5
  import clsx from 'clsx';
6
- import { getRedirectUrl } from '../../index.js';
6
+ // Deep import rather than the package barrel (`../../index.ts`): the barrel
7
+ // pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
8
+ // wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
9
+ // that deep-imports pricing-table (which renders TermsOfService).
10
+ import getRedirectUrl from '../../tools/jp-redirect/index.js';
7
11
  import Text from '../text/index.js';
8
12
  import './styles.scss';
9
13
  const TermsOfService = ({ className, multipleButtons, agreeButtonLabel, isTextOnly, ...textProps }) => {
package/build/components/upsell-banner/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Card, CardBody } from '@wordpress/components';
3
3
  import { createInterpolateElement } from '@wordpress/element';
4
- import { Button } from '@automattic/jetpack-components';
4
+ import Button from '../button/index.js';
5
5
  import './style.scss';
6
6
  /**
7
7
  * Upsell banner component.
package/components/admin-page/style.module.scss CHANGED
@@ -15,15 +15,16 @@
15
15
  // https://github.com/WordPress/gutenberg/issues/75428
16
16
 
17
17
  // Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
18
- // <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
19
- // directly inside that page node — no class hooks anymore.
20
- &.without-bottom-border :global(.jp-admin-page__page > header) {
18
+ // <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
19
+ // in 2.0). Target it positionally as `> :first-child` so we don't couple
20
+ // to the element tag or admin-ui's CSS-Modules-hashed class names.
21
+ &.without-bottom-border :global(.jp-admin-page__page > :first-child) {
21
22
  border-bottom: none;
22
23
  }
23
24
 
24
25
  // Disable sticky header until we make it work better across all pages.
25
26
  // JETPACK-1386
26
- :global(.jp-admin-page__page > header) {
27
+ :global(.jp-admin-page__page > :first-child) {
27
28
  position: relative;
28
29
  z-index: 1;
29
30
  }
@@ -34,15 +35,30 @@
34
35
  clear: both;
35
36
  }
36
37
 
37
- // admin-ui 2.0.0's header `visual` slot is a 24px grid box but does not
38
- // center its contents. Our JetpackLogo is 20px tall, so without this it
39
- // pins to the top-left of the cell and looks misaligned vs. the title.
40
- // admin-ui ships the slot as `<div aria-hidden="true">` in the header.
38
+ // admin-ui's header `visual` slot is a 24px grid box but does not center
39
+ // its contents. Our JetpackLogo is 20px tall, so without this it pins to
40
+ // the top-left of the cell and looks misaligned vs. the title. admin-ui
41
+ // ships the slot as `<div aria-hidden="true">` in the header.
41
42
  // TODO: remove once upstream centers contents in `.header-visual`.
42
- :global(.jp-admin-page__page > header [aria-hidden="true"]) {
43
+ :global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
43
44
  place-items: center;
44
45
  }
45
46
 
47
+ // Keep the header a constant height across tabs. The content row's height
48
+ // is driven by its tallest child (the `actions` slot), so tabs with
49
+ // differently-sized action controls — or none at all — render headers of
50
+ // different heights, which shifts the tab strip below them vertically.
51
+ // Reserve the standard 40px WP control height as a floor and center the
52
+ // row's items so a shorter control neither stretches nor collapses it.
53
+ // The content row is identified by the visual logo slot it contains
54
+ // (`aria-hidden="true"`), so a breadcrumbs-only header isn't affected.
55
+ // `> :first-child` targets the page header positionally (a `<div>` in
56
+ // admin-ui ≥ 2.1, a `<header>` in 2.0) — matching the sibling rules above.
57
+ :global(.jp-admin-page__page > :first-child > div:has([aria-hidden="true"])) {
58
+ min-height: 40px;
59
+ align-items: center;
60
+ }
61
+
46
62
  .admin-page-header {
47
63
  display: flex;
48
64
  align-items: center;
package/components/pricing-card/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { getCurrencyObject } from '@automattic/number-formatters';
2
2
  import { Button } from '@wordpress/components';
3
3
  import { sprintf, __ } from '@wordpress/i18n';
4
- import { LoadingPlaceholder } from '@automattic/jetpack-components';
4
+ import LoadingPlaceholder from '../loading-placeholder/index.tsx';
5
5
  import TermsOfService from '../terms-of-service/index.tsx';
6
6
  import type { PricingCardProps } from './types.ts';
7
7
  import type { CurrencyObject } from '@automattic/number-formatters';
package/components/terms-of-service/index.tsx CHANGED
@@ -2,7 +2,11 @@ import { createInterpolateElement } from '@wordpress/element';
2
2
  import { __, sprintf } from '@wordpress/i18n';
3
3
  import { Link } from '@wordpress/ui';
4
4
  import clsx from 'clsx';
5
- import { getRedirectUrl } from '../../index.ts';
5
+ // Deep import rather than the package barrel (`../../index.ts`): the barrel
6
+ // pulls in heavy, asset-importing components (e.g. boost-score-graph) that the
7
+ // wp-build esbuild pipeline can't bundle, which breaks any wp-build dashboard
8
+ // that deep-imports pricing-table (which renders TermsOfService).
9
+ import getRedirectUrl from '../../tools/jp-redirect/index.ts';
6
10
  import Text from '../text/index.tsx';
7
11
  import type { TermsOfServiceProps } from './types.ts';
8
12
  import type { FC, ReactNode } from 'react';
package/components/upsell-banner/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Card, CardBody } from '@wordpress/components';
2
2
  import { createInterpolateElement } from '@wordpress/element';
3
- import { Button } from '@automattic/jetpack-components';
3
+ import Button from '../button/index.tsx';
4
4
  import { UpsellBannerProps } from './types.ts';
5
5
  import type { FC, ReactNode } from 'react';
6
6
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "1.11.3",
3
+ "version": "1.12.0",
4
4
  "description": "Jetpack Components Package",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
6
6
  "bugs": {
@@ -26,6 +26,10 @@
26
26
  "types": "./build/components/admin-page/index.d.ts",
27
27
  "default": "./build/components/admin-page/index.js"
28
28
  },
29
+ "./button": {
30
+ "types": "./build/components/button/index.d.ts",
31
+ "default": "./build/components/button/index.js"
32
+ },
29
33
  "./global-notices": {
30
34
  "types": "./build/components/global-notices/index.d.ts",
31
35
  "default": "./build/components/global-notices/index.js"
@@ -42,6 +46,14 @@
42
46
  "types": "./build/components/jetpack-logo/index.d.ts",
43
47
  "default": "./build/components/jetpack-logo/index.js"
44
48
  },
49
+ "./pricing-table": {
50
+ "types": "./build/components/pricing-table/index.d.ts",
51
+ "default": "./build/components/pricing-table/index.js"
52
+ },
53
+ "./product-price": {
54
+ "types": "./build/components/product-price/index.d.ts",
55
+ "default": "./build/components/product-price/index.js"
56
+ },
45
57
  "./tools/jp-redirect": {
46
58
  "types": "./build/tools/jp-redirect/index.d.ts",
47
59
  "default": "./build/tools/jp-redirect/index.js"
@@ -64,10 +76,10 @@
64
76
  "@automattic/jetpack-api": "^1.0.26",
65
77
  "@automattic/jetpack-boost-score-api": "^1.0.43",
66
78
  "@automattic/jetpack-script-data": "^0.6.4",
67
- "@automattic/number-formatters": "^1.1.10",
79
+ "@automattic/number-formatters": "^1.2.0",
68
80
  "@babel/runtime": "^7",
69
81
  "@gravatar-com/hovercards": "0.16.0",
70
- "@wordpress/admin-ui": "2.0.0",
82
+ "@wordpress/admin-ui": "2.1.0",
71
83
  "@wordpress/browserslist-config": "6.46.0",
72
84
  "@wordpress/components": "33.1.0",
73
85
  "@wordpress/compose": "7.46.0",
@@ -84,7 +96,7 @@
84
96
  "prop-types": "^15.7.2",
85
97
  "qrcode.react": "4.2.0",
86
98
  "react-slider": "2.0.5",
87
- "social-logos": "^3.3.15",
99
+ "social-logos": "^3.3.16",
88
100
  "uplot": "1.6.31",
89
101
  "uplot-react": "1.1.4"
90
102
  },