@automattic/jetpack-components 0.72.6 → 0.73.1

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.73.1] - 2025-05-19
+### Changed
+- Update dependencies.
+
+## [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]
@@ -1385,6 +1396,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[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
 [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

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/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/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/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/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.6",
+	"version": "0.73.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -18,6 +18,7 @@
 		"@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.2",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.22.0",
 		"@wordpress/components": "29.8.0",
@@ -32,12 +33,12 @@
 		"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.3",
+		"@automattic/jetpack-base-styles": "^0.7.4",
 		"@babel/core": "7.26.10",
 		"@babel/preset-react": "7.26.3",
 		"@jest/globals": "29.7.0",

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;