@automattic/jetpack-components 0.72.4 → 0.72.5

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 CHANGED
@@ -2,6 +2,15 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.72.5] - 2025-04-28
6
+ ### Changed
7
+ - Connection: Mark external links as external. [#43152]
8
+
9
+ ### Fixed
10
+ - Code: Use modern font MIME types for inline fonts. [#43227]
11
+ - Linting: Fix more Stylelint violations. [#43213]
12
+ - My Jetpack: Fix TypeScript type checking and the corresponding errors. [#43205]
13
+
5
14
  ## [0.72.4] - 2025-04-14
6
15
  ### Changed
7
16
  - Adjust relative imports in TypeScript sources to use correct extensions after enabling TypeScript's new `rewriteRelativeImportExtensions` option. [#42990]
@@ -1367,6 +1376,7 @@
1367
1376
  ### Changed
1368
1377
  - Update node version requirement to 14.16.1
1369
1378
 
1379
+ [0.72.5]: https://github.com/Automattic/jetpack-components/compare/0.72.4...0.72.5
1370
1380
  [0.72.4]: https://github.com/Automattic/jetpack-components/compare/0.72.3...0.72.4
1371
1381
  [0.72.3]: https://github.com/Automattic/jetpack-components/compare/0.72.2...0.72.3
1372
1382
  [0.72.2]: https://github.com/Automattic/jetpack-components/compare/0.72.1...0.72.2
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { ExternalLink } from '@wordpress/components';
2
3
  import { createInterpolateElement } from '@wordpress/element';
3
4
  import { __, sprintf } from '@wordpress/i18n';
4
5
  import clsx from 'clsx';
@@ -43,5 +44,5 @@ const TermsOfServiceTextOnly = () => createInterpolateElement(__('By continuing
43
44
  tosLink: _jsx(Link, { slug: "wpcom-tos" }),
44
45
  shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
45
46
  });
46
- const Link = ({ slug, children }) => (_jsx("a", { className: "terms-of-service__link", href: getRedirectUrl(slug), rel: "noopener noreferrer", target: "_blank", children: children }));
47
+ const Link = ({ slug, children }) => (_jsx(ExternalLink, { className: "terms-of-service__link", href: getRedirectUrl(slug), children: children }));
47
48
  export default TermsOfService;
@@ -39,6 +39,7 @@ export type TextProps = {
39
39
  component?: React.FC<{
40
40
  [prop: string]: unknown;
41
41
  }> | React.ElementType;
42
+ style?: React.CSSProperties;
42
43
  };
43
44
  export type H3Props = TextProps & {
44
45
  /** Font weight: 'bold' (default) | 'regular'. */
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * Returns the site admin URL.
3
3
  *
4
+ * @deprecated use `getAdminUrl` from `@automattic/jetpack-script-data` instead.
5
+ *
4
6
  * @return {?string} The site admin URL or null if not available.
5
7
  */
6
- export default function getSiteAdminUrl(): string;
8
+ export default function getSiteAdminUrl(): any;
@@ -2,12 +2,16 @@ import { getScriptData } from '@automattic/jetpack-script-data';
2
2
  /**
3
3
  * Returns the site admin URL.
4
4
  *
5
+ * @deprecated use `getAdminUrl` from `@automattic/jetpack-script-data` instead.
6
+ *
5
7
  * @return {?string} The site admin URL or null if not available.
6
8
  */
7
9
  export default function getSiteAdminUrl() {
8
10
  return (getScriptData()?.site?.admin_url ||
9
11
  window.Initial_State?.adminUrl ||
10
12
  window.Jetpack_Editor_Initial_State?.adminUrl ||
13
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because myJetpackInitialState is typed in "my-jetpack" package and that doesn't expect this error
14
+ // @ts-ignore The usage of myJetpackInitialState is not typed inside this generic package. We should get rid of it in the future.
11
15
  window?.myJetpackInitialState?.adminUrl ||
12
16
  null);
13
17
  }
@@ -21,6 +21,8 @@ export default function getRedirectUrl(source, args = {}) {
21
21
  const queryVars = {};
22
22
  let calypsoEnv;
23
23
  if (typeof window !== 'undefined') {
24
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because JP_CONNECTION_INITIAL_STATE is typed in the "connection" package and that doesn't expect this error
25
+ // @ts-ignore The usage of JP_CONNECTION_INITIAL_STATE is not typed inside this generic package. We should get rid of it in the future.
24
26
  calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
25
27
  }
26
28
  if (source.search('https://') === 0) {
@@ -2,7 +2,7 @@
2
2
  color: var( --jp-red );
3
3
  line-height: 25px;
4
4
  padding-left: 25px;
5
- background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIHN0cm9rZT0iI0Q2MzYzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTEzIDdIMTFWMTNIMTNWN1oiIGZpbGw9IiNENjM2MzkiLz4KPHBhdGggZD0iTTEzIDE1SDExVjE3SDEzVjE1WiIgZmlsbD0iI0Q2MzYzOSIvPgo8L3N2Zz4K") no-repeat 0 0;
5
+ background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIHN0cm9rZT0iI0Q2MzYzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTEzIDdIMTFWMTNIMTNWN1oiIGZpbGw9IiNENjM2MzkiLz4KPHBhdGggZD0iTTEzIDE1SDExVjE3SDEzVjE1WiIgZmlsbD0iI0Q2MzYzOSIvPgo8L3N2Zz4K) no-repeat 0 0;
6
6
  }
7
7
 
8
8
  .button {
@@ -12,7 +12,6 @@ $white: #fff;
12
12
 
13
13
  &__line {
14
14
  position: absolute;
15
- width: 10px;
16
15
  height: 100%;
17
16
  transform: translateX(-50%);
18
17
  pointer-events: all;
@@ -65,7 +64,7 @@ $white: #fff;
65
64
  border-radius: 4px;
66
65
  font-size: 14px;
67
66
  position: absolute;
68
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
67
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
69
68
  text-align: center;
70
69
  transform: translateX(-50%);
71
70
  z-index: 2;
@@ -21,13 +21,12 @@ $white: #fff;
21
21
  .jb-score-tooltip {
22
22
  background-color: $black;
23
23
  color: $white;
24
- width: fit-content;
25
24
  padding: 16px 24px;
26
25
  border-radius: 4px;
27
26
  font-size: 14px;
28
27
  width: 20em;
29
28
  position: relative;
30
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
29
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
31
30
  display: none;
32
31
 
33
32
  .visible &, &:hover {
@@ -30,7 +30,8 @@
30
30
  left: 24px;
31
31
  width: 38px;
32
32
  height: 8px;
33
- background-image: url('data:image/svg+xml;uf8,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
33
+ // stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
34
+ background-image: url('data:image/svg+xml,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
34
35
  }
35
36
  }
36
37
 
@@ -61,7 +62,8 @@
61
62
  background-repeat: no-repeat;
62
63
 
63
64
  &--unlink {
64
- background-image: url('data:image/svg+xml;uf8,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
65
+ // stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
66
+ background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
65
67
  }
66
68
  }
67
69
 
@@ -23,7 +23,7 @@
23
23
  display: flex;
24
24
  justify-content: center;
25
25
  position: absolute;
26
- bottom: 0px;
26
+ bottom: 0;
27
27
  left: 0;
28
28
  right: 0;
29
29
  z-index: 1;
@@ -64,7 +64,7 @@
64
64
  border-radius: 50%;
65
65
  width: 6px;
66
66
  height: 6px;
67
- padding: 0px;
67
+ padding: 0;
68
68
  background-color: var(--jp-white-off);
69
69
 
70
70
  &:hover {
@@ -13,11 +13,11 @@ $arrow-color: var( --jp-gray );
13
13
  /*
14
14
  * Fix arrow placement - section start
15
15
  */
16
- .components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content {
16
+ .components-popover:not([data-y-axis="middle"])[data-x-axis="left"] .components-popover__content {
17
17
  margin-right: -62px;
18
18
  }
19
19
 
20
- .components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
20
+ .components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content {
21
21
  margin-left: -62px;
22
22
  }
23
23
 
@@ -28,27 +28,27 @@ $arrow-color: var( --jp-gray );
28
28
  /*
29
29
  * Fix arrow position for legacy position option - section start
30
30
  */
31
- .components-popover[data-y-axis=bottom] .components-popover__content {
31
+ .components-popover[data-y-axis="bottom"] .components-popover__content {
32
32
  top: 2px !important;
33
33
  }
34
34
 
35
- .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
35
+ .components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::before {
36
36
  top: -6px !important;
37
37
  }
38
38
 
39
- .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
39
+ .components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::after {
40
40
  top: -4px !important;
41
41
  }
42
42
 
43
- .components-popover[data-y-axis=top] .components-popover__content {
43
+ .components-popover[data-y-axis="top"] .components-popover__content {
44
44
  bottom: 10px !important;
45
45
  }
46
46
 
47
- .components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
47
+ .components-popover:not(.is-without-arrow)[data-y-axis="top"]::before {
48
48
  bottom: 3px;
49
49
  }
50
50
 
51
- .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
51
+ .components-popover:not(.is-without-arrow)[data-y-axis="top"]::after {
52
52
  bottom: 4px;
53
53
  }
54
54
 
@@ -15,7 +15,7 @@
15
15
  text-decoration: none;
16
16
 
17
17
  &:any-link,
18
- &[role=button] {
18
+ &[role="button"] {
19
19
  color: inherit;
20
20
  }
21
21
 
@@ -78,13 +78,13 @@
78
78
  }
79
79
 
80
80
  .jp-dashboard-footer__accessible-external-link {
81
- border: 0px;
81
+ border: 0;
82
82
  clip: rect(1px, 1px, 1px, 1px);
83
83
  clip-path: inset(50%);
84
84
  height: 1px;
85
85
  margin: -1px;
86
86
  overflow: hidden;
87
- padding: 0px;
87
+ padding: 0;
88
88
  position: absolute;
89
89
  width: 1px;
90
90
  overflow-wrap: normal;
@@ -36,7 +36,7 @@
36
36
  .container {
37
37
  position: relative;
38
38
  padding-top: 68px;
39
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.06);
39
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
40
40
  }
41
41
 
42
42
  .icon-wrapper {
@@ -3,7 +3,7 @@
3
3
  max-width: calc( 100% - 32px );
4
4
  padding: 16px;
5
5
  background-color: #fff;
6
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
6
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 4px 8px 0 rgba(0, 0, 0, 0.03);
7
7
  border: 1px solid rgba(220, 220, 222, 1);
8
8
  border-radius: 4px;
9
9
  text-align: center;
@@ -6,7 +6,7 @@
6
6
  max-width: 384px;
7
7
  padding: 24px 24px 32px;
8
8
  background:var( --jp-white );
9
- box-shadow: 0px 10px 40px rgba( 0, 0, 0, 0.08 );
9
+ box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.08 );
10
10
  border-radius: var( --jp-border-radius );
11
11
 
12
12
  @media screen and ( min-width: 600px ) {
@@ -53,7 +53,7 @@
53
53
  position: absolute;
54
54
  width: 100%;
55
55
  height: 3px;
56
- left: 0px;
56
+ left: 0;
57
57
  top: 20px;
58
58
  background: var( --jp-pink );
59
59
  border-radius: 1.5px;
@@ -94,7 +94,7 @@
94
94
  color: var( --jp-white ) !important;
95
95
  border-radius: var( --jp-border-radius );
96
96
  padding: 14px 24px;
97
- margin: 24px 0px 32px;
97
+ margin: 24px 0 32px;
98
98
  justify-content: center;
99
99
  align-items: center;
100
100
  }
@@ -38,7 +38,7 @@
38
38
  right: 0;
39
39
  bottom: 0;
40
40
  z-index: -1;
41
- box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
41
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
42
42
  }
43
43
  }
44
44
  }
@@ -1,6 +1,6 @@
1
1
  .wrapper {
2
2
  background-color: var( --jp-white );
3
- box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08);
3
+ box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
4
4
  border-radius: calc( var( --jp-border-radius ) * 2 ); // 8px;
5
5
  display: flex;
6
6
 
@@ -1,3 +1,4 @@
1
+ import { ExternalLink } from '@wordpress/components';
1
2
  import { createInterpolateElement } from '@wordpress/element';
2
3
  import { __, sprintf } from '@wordpress/i18n';
3
4
  import clsx from 'clsx';
@@ -92,14 +93,9 @@ const TermsOfServiceTextOnly = () =>
92
93
  );
93
94
 
94
95
  const Link: React.FC< { slug: string; children?: React.ReactNode } > = ( { slug, children } ) => (
95
- <a
96
- className="terms-of-service__link"
97
- href={ getRedirectUrl( slug ) }
98
- rel="noopener noreferrer"
99
- target="_blank"
100
- >
96
+ <ExternalLink className="terms-of-service__link" href={ getRedirectUrl( slug ) }>
101
97
  { children }
102
- </a>
98
+ </ExternalLink>
103
99
  );
104
100
 
105
101
  export default TermsOfService;
@@ -5,6 +5,5 @@
5
5
  .terms-of-service__link {
6
6
  color: var(--jp-green-50);
7
7
  white-space: nowrap;
8
- text-decoration: underline;
9
8
  }
10
9
  }
@@ -39,6 +39,7 @@ export type TextProps = {
39
39
  children: React.ReactNode;
40
40
  /** Force an specific tag (span, div) or use a custom component that will receive className and children */
41
41
  component?: React.FC< { [ prop: string ]: unknown } > | React.ElementType;
42
+ style?: React.CSSProperties;
42
43
  };
43
44
 
44
45
  export type H3Props = TextProps & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.72.4",
3
+ "version": "0.72.5",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -17,7 +17,7 @@
17
17
  "@automattic/format-currency": "1.0.1",
18
18
  "@automattic/jetpack-boost-score-api": "^0.1.63",
19
19
  "@automattic/jetpack-api": "^0.20.1",
20
- "@automattic/jetpack-script-data": "^0.4.0",
20
+ "@automattic/jetpack-script-data": "^0.4.1",
21
21
  "@babel/runtime": "^7",
22
22
  "@wordpress/browserslist-config": "6.21.0",
23
23
  "@wordpress/components": "29.7.0",
@@ -32,12 +32,12 @@
32
32
  "prop-types": "^15.7.2",
33
33
  "qrcode.react": "4.2.0",
34
34
  "react-slider": "2.0.5",
35
- "social-logos": "^3.1.20",
35
+ "social-logos": "^3.1.21",
36
36
  "uplot": "1.6.31",
37
37
  "uplot-react": "1.1.4"
38
38
  },
39
39
  "devDependencies": {
40
- "@automattic/jetpack-base-styles": "^0.7.1",
40
+ "@automattic/jetpack-base-styles": "^0.7.2",
41
41
  "@babel/core": "7.26.10",
42
42
  "@babel/preset-react": "7.26.3",
43
43
  "@jest/globals": "29.4.3",
@@ -3,6 +3,8 @@ import { getScriptData } from '@automattic/jetpack-script-data';
3
3
  /**
4
4
  * Returns the site admin URL.
5
5
  *
6
+ * @deprecated use `getAdminUrl` from `@automattic/jetpack-script-data` instead.
7
+ *
6
8
  * @return {?string} The site admin URL or null if not available.
7
9
  */
8
10
  export default function getSiteAdminUrl() {
@@ -10,6 +12,8 @@ export default function getSiteAdminUrl() {
10
12
  getScriptData()?.site?.admin_url ||
11
13
  window.Initial_State?.adminUrl ||
12
14
  window.Jetpack_Editor_Initial_State?.adminUrl ||
15
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because myJetpackInitialState is typed in "my-jetpack" package and that doesn't expect this error
16
+ // @ts-ignore The usage of myJetpackInitialState is not typed inside this generic package. We should get rid of it in the future.
13
17
  window?.myJetpackInitialState?.adminUrl ||
14
18
  null
15
19
  );
@@ -25,6 +25,8 @@ export default function getRedirectUrl( source: string, args: GetRedirectUrlArgs
25
25
 
26
26
  let calypsoEnv;
27
27
  if ( typeof window !== 'undefined' ) {
28
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because JP_CONNECTION_INITIAL_STATE is typed in the "connection" package and that doesn't expect this error
29
+ // @ts-ignore The usage of JP_CONNECTION_INITIAL_STATE is not typed inside this generic package. We should get rid of it in the future.
28
30
  calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
29
31
  }
30
32