@automattic/jetpack-components 0.72.5 → 0.73.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.73.0] - 2025-05-12
+### Changed
+- Use `formatCurrency()` and `getCurrencyObject()` functions from the `@automattic/number-formatters` package. [#42796]
+
+### Removed
+- Remove the `numberFormat()` function. This is a breaking change; use the `@automattic/number-formatters` package instead. [#42864]
+
+## [0.72.6] - 2025-05-05
+### Changed
+- Update package dependencies. [#43320] [#43326]
+
+### Fixed
+- JS Packages: Decrease CSS priority of global styles to prevent them from applying within the editor. [#43035]
+- Linting: Address final rules in WordPress Stylelint config. [#43296]
+- Linting: Do additional stylesheet cleanup. [#43247]
+
 ## [0.72.5] - 2025-04-28
 ### Changed
 - Connection: Mark external links as external. [#43152]
@@ -1376,6 +1392,8 @@
 ### Changed
 - Update node version requirement to 14.16.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
 [0.72.5]: https://github.com/Automattic/jetpack-components/compare/0.72.4...0.72.5
 [0.72.4]: https://github.com/Automattic/jetpack-components/compare/0.72.3...0.72.4
 [0.72.3]: https://github.com/Automattic/jetpack-components/compare/0.72.2...0.72.3

package/build/components/boost-score-graph/uplot-line-chart.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { formatNumber } from '@automattic/number-formatters';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useRef, useCallback } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { getUserLocale } from "../../lib/locale/index.js";
-import numberFormat from "../number-format/index.js";
 import { annotationsPlugin } from "./annotations-plugin.js";
 import { dayHighlightPlugin } from "./day-highlight-plugin.js";
 import getDateFormat from "./get-date-format.js";
@@ -45,7 +45,7 @@ function createSerieInfo(label, score) {
             if (!rawValue) {
                 return '-';
             }
-            return numberFormat(rawValue);
+            return formatNumber(rawValue);
         },
     };
 }

package/build/components/pricing-card/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getCurrencyObject } from '@automattic/format-currency';
+import { getCurrencyObject } from '@automattic/number-formatters';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { LoadingPlaceholder } from '@automattic/jetpack-components';

package/build/components/product-price/price.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getCurrencyObject } from '@automattic/format-currency';
+import { getCurrencyObject } from '@automattic/number-formatters';
 import clsx from 'clsx';
 import Text from "../text/index.js";
 import styles from './style.module.scss';

package/build/components/record-meter-bar/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatNumber } from '@automattic/number-formatters';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import numberFormat from "../number-format/index.js";
 import './style.scss';
 /**
  * Generate Record Meter bar
@@ -31,7 +31,7 @@ const RecordMeterBar = ({ totalCount, items = [], showLegendLabelBeforeCount = f
                     const widthPercent = ((count / total) * 100).toPrecision(2);
                     return (_jsx("div", { style: { backgroundColor, flexBasis: `${widthPercent}%` } }, label));
                 }) }), _jsxs("div", { className: "record-meter-bar__legend", "aria-hidden": "true", children: [legendTitle && _jsx("div", { className: "record-meter-bar__legend--title", children: legendTitle }), _jsx("ul", { className: "record-meter-bar__legend--items", children: itemsToRender.map(({ count, label, backgroundColor }) => {
-                            const formattedCount = numberFormat(count);
+                            const formattedCount = formatNumber(count);
                             return (_jsxs("li", { className: "record-meter-bar__legend--item", children: [_jsx("div", { className: "record-meter-bar__legend--item-circle", style: { backgroundColor } }), !showLegendLabelBeforeCount && (_jsxs("span", { children: [_jsx("span", { className: "record-meter-bar__legend--item-count", children: formattedCount }), _jsx("span", { className: "record-meter-bar__legend--item-label", children: label })] })), showLegendLabelBeforeCount && (_jsxs("span", { children: [_jsx("span", { className: "record-meter-bar__legend--item-label record-meter-bar__legend--item-label-first", children: label }), _jsxs("span", { className: "record-meter-bar__legend--item-count", children: ["(", formattedCount, ")"] })] }))] }, label));
                         }) })] }), _jsxs("table", { className: "screen-reader-text", children: [_jsx("caption", { children: tableCaption || __('Summary of the records', 'jetpack-components') }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("th", { scope: "col", children: recordTypeLabel || __('Record type', 'jetpack-components') }), _jsx("th", { scope: "col", children: recordCountLabel || __('Record count', 'jetpack-components') })] }), itemsToRender.map(({ label, count }) => {
                                 return (_jsxs("tr", { children: [_jsx("td", { children: label }), _jsx("td", { children: count })] }, label));

package/build/components/stat-card/index.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
+import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
 import { Tooltip } from '@wordpress/components';
 import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import numberFormat from "../number-format/index.js";
 import Text from "../text/index.js";
 import styles from './style.module.scss';
 /**
@@ -17,11 +17,8 @@ import styles from './style.module.scss';
  * @return {React.ReactNode} - StatCard react component.
  */
 const StatCard = ({ className, hideValue, icon, label, value, variant = 'square', }) => {
-    const formattedValue = numberFormat(value);
-    const compactValue = numberFormat(value, {
-        notation: 'compact',
-        compactDisplay: 'short',
-    });
+    const formattedValue = formatNumber(value);
+    const compactValue = formatNumberCompact(value);
     return (_jsxs("div", { className: clsx(className, styles.wrapper, styles[variant]), children: [_jsx("div", { className: clsx(styles.icon), children: icon }), _jsxs("div", { className: clsx(styles.info), children: [_jsx(Text, { className: styles.label, children: label }), variant === 'square' ? (_jsx(Tooltip, { text: formattedValue, placement: "top", children: _jsx(Text, { variant: "headline-small", className: clsx(styles.value), children: hideValue ? '-' : compactValue }) })) : (_jsx(Text, { variant: "title-medium-semi-bold", className: clsx(styles.value), children: hideValue ? '-' : formattedValue }))] })] }));
 };
 export default StatCard;

package/build/index.d.ts

@@ -31,7 +31,6 @@ export { default as ThemeProvider } from './components/theme-provider/index.tsx'
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
 export { default as ToggleControl } from './components/toggle-control/index.tsx';
 export { default as NumberControl } from './components/number-control/index.jsx';
-export { default as numberFormat } from './components/number-format/index.ts';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';

package/build/index.js

@@ -46,7 +46,6 @@ export { default as ThemeProvider } from "./components/theme-provider/index.js";
 export { default as Text, H2, H3, Title } from "./components/text/index.js";
 export { default as ToggleControl } from "./components/toggle-control/index.js";
 export { default as NumberControl } from './components/number-control/index.jsx';
-export { default as numberFormat } from "./components/number-format/index.js";
 export { default as QRCode } from "./components/qr-code/index.js";
 export { default as Button } from "./components/button/index.js";
 export { default as LoadingPlaceholder } from "./components/loading-placeholder/index.js";

package/components/boost-score-graph/style-tooltip.scss

@@ -43,6 +43,7 @@ $white: #fff;
     &__date {
         font-size: 1em;
         font-weight: 600;
+        // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
         line-height: 1.6em;
     }
 
@@ -69,4 +70,4 @@ $white: #fff;
         left: 50%;
         transform: translateX(-50%);
     }
-}
+}

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -1,9 +1,9 @@
+import { formatNumber } from '@automattic/number-formatters';
 import { __ } from '@wordpress/i18n';
 import React, { useMemo, useRef, useCallback } from 'react';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { getUserLocale } from '../../lib/locale/index.ts';
-import numberFormat from '../number-format/index.ts';
 import { annotationsPlugin } from './annotations-plugin.ts';
 import { dayHighlightPlugin } from './day-highlight-plugin.ts';
 import getDateFormat from './get-date-format.ts';
@@ -68,7 +68,7 @@ function createSerieInfo( label: string, score ) {
 				return '-';
 			}
 
-			return numberFormat( rawValue );
+			return formatNumber( rawValue );
 		},
 	};
 }

package/components/button/style.module.scss

@@ -53,7 +53,7 @@
 		}
 
 		// With Spinner
-		& > :global(.components-spinner) {
+		> :global(.components-spinner) {
 			height: 20px;
 		}
 	}
@@ -197,12 +197,12 @@
 			justify-content: center;
 		}
 
-		& > *:not(:global(.components-spinner)) {
+		> *:not(:global(.components-spinner)) {
 			visibility: hidden;
 		}
 
 		// Spinner
-		& > :global(.components-spinner) {
+		> :global(.components-spinner) {
 			margin: 0;
 			position: absolute;
 		}

package/components/contextual-upgrade-trigger/style.module.scss

@@ -35,11 +35,11 @@
 	&:focus-within,
 	&:hover {
 
-		& .icon {
+		.icon {
 			transform: translateX( calc( var( --spacing-base ) * 2 ) );
 		}
 
-		& .cta {
+		.cta {
 			text-decoration: underline;
 			text-decoration-thickness: 2px;
 		}
@@ -74,4 +74,4 @@
 
 .description {
 	display: inline;
-}
+}

package/components/diff-viewer/styles.module.scss

@@ -33,19 +33,19 @@
 	flex-grow: 1;
 	overflow-x: visible;
 
-	& div,
-	& del,
-	& ins {
+	div,
+	del,
+	ins {
 		padding: 0 var( --spacing-base ); // 0px | 8px
 		text-decoration: none;
 	}
 
-	& del {
+	del {
 		background-color: var( --jp-red-0 );
 		color: var( --jp-red-60 );
 	}
 
-	& ins {
+	ins {
 		background-color: var( --jp-green-5 );
 		color: var( --jp-green-60 );
 	}

package/components/dot-pager/style.scss

@@ -50,6 +50,11 @@
 
 .dot-pager__control-choose-page {
 	cursor: pointer;
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	padding: 0;
+	background-color: var(--jp-white-off);
 
 	&:disabled {
 		cursor: default;
@@ -58,14 +63,6 @@
 	&:focus-visible {
 		box-shadow: 0 0 0 2px var(--jp-gray-90);
 	}
-}
-
-.dot-pager__control-choose-page {
-	border-radius: 50%;
-	width: 6px;
-	height: 6px;
-	padding: 0;
-	background-color: var(--jp-white-off);
 
 	&:hover {
 		background-color: var(--jp-gray-20);
@@ -76,9 +73,6 @@
 	}
 }
 
-.dot-pager {
-
-	&__button {
-		margin-right: 10px;
-	}
+.dot-pager__button {
+	margin-right: 10px;
 }

package/components/icon-tooltip/style.scss

@@ -9,6 +9,14 @@ $arrow-color: var( --jp-gray );
 
 // Namespace to avoid overriding global styles
 .icon-tooltip-helper {
+	// POPOVER_HELPER_WIDTH
+	width: 124px;
+	height: 18px;
+	position: absolute;
+	top: 0;
+	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
+	left: -53px;
+	pointer-events: none;
 
 	/*
 	* Fix arrow placement - section start
@@ -71,17 +79,6 @@ $arrow-color: var( --jp-gray );
 	}
 }
 
-.icon-tooltip-helper {
-	// POPOVER_HELPER_WIDTH
-	width: 124px;
-	height: 18px;
-	position: absolute;
-	top: 0;
-	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
-	left: -53px;
-	pointer-events: none;
-}
-
 .icon-tooltip-container {
 	// Recover events
 	pointer-events: all;

package/components/icons/style.module.scss

@@ -24,10 +24,6 @@
 		}
 	}
 
-	&.instagram {
-		fill: var( --color-instagram );
-	}
-
 	&.twitter {
 		fill: var( --color-twitter );
 	}

package/components/popover/style.scss

@@ -19,7 +19,8 @@
 
 	&__body p {
 		font-weight: 400;
+		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
 		line-height: 1.6em;
 		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	}
-}
+}

package/components/pricing-card/index.tsx

@@ -1,10 +1,10 @@
-import { getCurrencyObject } from '@automattic/format-currency';
+import { getCurrencyObject } from '@automattic/number-formatters';
 import { Button } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { LoadingPlaceholder } from '@automattic/jetpack-components';
 import TermsOfService from '../terms-of-service/index.tsx';
 import type { PricingCardProps } from './types.ts';
-import type { CurrencyObject } from '@automattic/format-currency/src/types.js';
+import type { CurrencyObject } from '@automattic/number-formatters';
 import type React from 'react';
 
 import './style.scss';

package/components/product-price/price.tsx

@@ -1,4 +1,4 @@
-import { getCurrencyObject } from '@automattic/format-currency';
+import { getCurrencyObject } from '@automattic/number-formatters';
 import clsx from 'clsx';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';

package/components/record-meter-bar/index.tsx

@@ -1,7 +1,7 @@
+import { formatNumber } from '@automattic/number-formatters';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
-import numberFormat from '../number-format/index.ts';
 
 import './style.scss';
 
@@ -110,7 +110,7 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
 				{ legendTitle && <div className="record-meter-bar__legend--title">{ legendTitle }</div> }
 				<ul className="record-meter-bar__legend--items">
 					{ itemsToRender.map( ( { count, label, backgroundColor } ) => {
-						const formattedCount = numberFormat( count );
+						const formattedCount = formatNumber( count );
 						return (
 							<li key={ label } className="record-meter-bar__legend--item">
 								<div

package/components/split-button/style.module.scss

@@ -9,11 +9,11 @@
 		height: 100%;
 	}
 
-    & > .button:first-child {
+    > .button:first-child {
         border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
     }
 
-    & > :global(.components-dropdown) > .button {
+    > :global(.components-dropdown) > .button {
         border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
     }
 }
@@ -23,4 +23,4 @@
 	border-radius: var(--jp-border-radius);
 	height: var(--actions-size);
 	line-height: var(--actions-size);
-}
+}

package/components/stat-card/index.tsx

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
+import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
 import { Tooltip } from '@wordpress/components';
 import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import numberFormat from '../number-format/index.ts';
 import Text from '../text/index.tsx';
 import styles from './style.module.scss';
 import { StatCardProps } from './types.ts';
@@ -26,11 +26,8 @@ const StatCard = ( {
 	value,
 	variant = 'square',
 }: StatCardProps ) => {
-	const formattedValue = numberFormat( value );
-	const compactValue = numberFormat( value, {
-		notation: 'compact',
-		compactDisplay: 'short',
-	} );
+	const formattedValue = formatNumber( value );
+	const compactValue = formatNumberCompact( value );
 
 	return (
 		<div className={ clsx( className, styles.wrapper, styles[ variant ] ) }>

package/components/theme-provider/globals.module.scss

@@ -1,7 +1,7 @@
 /* DO NOT USE THIS TO OVERRIDE STYLES */
 .global {
 
-	& * {
+	:where(&) * {
 		box-sizing: border-box;
 	}
 }

package/index.ts

@@ -47,7 +47,6 @@ export { default as ThemeProvider } from './components/theme-provider/index.tsx'
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
 export { default as ToggleControl } from './components/toggle-control/index.tsx';
 export { default as NumberControl } from './components/number-control/index.jsx';
-export { default as numberFormat } from './components/number-format/index.ts';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.72.5",
+	"version": "0.73.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,32 +15,33 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.63",
-		"@automattic/jetpack-api": "^0.20.1",
+		"@automattic/jetpack-boost-score-api": "^0.1.64",
+		"@automattic/jetpack-api": "^0.20.2",
 		"@automattic/jetpack-script-data": "^0.4.1",
+		"@automattic/number-formatters": "^1.0.1",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.21.0",
-		"@wordpress/components": "29.7.0",
-		"@wordpress/compose": "7.21.0",
-		"@wordpress/data": "10.21.0",
-		"@wordpress/date": "5.21.0",
-		"@wordpress/element": "6.21.0",
-		"@wordpress/i18n": "5.21.0",
-		"@wordpress/icons": "10.21.0",
-		"@wordpress/notices": "5.21.0",
+		"@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",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.21",
+		"social-logos": "^3.2.0",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.7.2",
+		"@automattic/jetpack-base-styles": "^0.7.4",
 		"@babel/core": "7.26.10",
 		"@babel/preset-react": "7.26.3",
-		"@jest/globals": "29.4.3",
+		"@jest/globals": "29.7.0",
 		"@storybook/addon-actions": "8.6.7",
 		"@storybook/blocks": "8.6.7",
 		"@storybook/react": "8.6.7",

package/build/components/number-format/index.d.ts

@@ -1,9 +0,0 @@
-/**
- * Format a number using the locale in use by the user viewing the page.
- *
- * @param {number}                   number  - The number to format.
- * @param {Intl.NumberFormatOptions} options - The format options
- * @return {string} Formatted number.
- */
-declare const numberFormat: (number: number, options?: Intl.NumberFormatOptions) => string;
-export default numberFormat;

package/build/components/number-format/index.js

@@ -1,13 +0,0 @@
-import { getUserLocale } from "../../lib/locale/index.js";
-/**
- * Format a number using the locale in use by the user viewing the page.
- *
- * @param {number}                   number  - The number to format.
- * @param {Intl.NumberFormatOptions} options - The format options
- * @return {string} Formatted number.
- */
-const numberFormat = (number, options = {}) => {
-    const locale = getUserLocale();
-    return new Intl.NumberFormat(locale, options).format(number);
-};
-export default numberFormat;

package/components/number-format/README.md

@@ -1,25 +0,0 @@
-numberFormat
-=========
-
-This utility function can be used to format numbers so they are displayed in the format expected for a specific locale.
-
-For example, a large number such as `123456` would be displayed as `123,456` in US English, and as `123 456` in FR French.
-
-The function relies on `Intl.NumberFormat` to format the numbers, based on the locale information available in WordPress, or based on the browser locale as a fallback.
-
-## General Usage:
-
-```js
-import { numberFormat } from '@automattic/jetpack-components';
-
-render() {
-	const number = '123456';
-	const options = {
-		notation: 'compact',
-		compactDisplay: 'short',
-	};
-	return (
-		<>{ numberFormat( number ) }</> // 123K
-	);
-}
-```

package/components/number-format/index.ts

@@ -1,16 +0,0 @@
-import { getUserLocale } from '../../lib/locale/index.ts';
-
-/**
- * Format a number using the locale in use by the user viewing the page.
- *
- * @param {number}                   number  - The number to format.
- * @param {Intl.NumberFormatOptions} options - The format options
- * @return {string} Formatted number.
- */
-const numberFormat = ( number: number, options: Intl.NumberFormatOptions = {} ): string => {
-	const locale = getUserLocale();
-
-	return new Intl.NumberFormat( locale, options ).format( number );
-};
-
-export default numberFormat;