@automattic/jetpack-components 1.12.11 → 1.12.13

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.12.13] - 2026-06-26
+### Changed
+- Internal updates.
+
+## [1.12.12] - 2026-06-25
+### Fixed
+- Icon tooltip: Type `iconCode` as `ReactElement` so it matches the `@wordpress/icons` Icon and `@wordpress/ui` 0.15 type definitions. [#49795]
+
 ## [1.12.11] - 2026-06-24
 ### Removed
 - Remove deprecated Spinner component. Use Spinner from @wordpress/components instead. [#49856]
@@ -1856,6 +1864,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.12.13]: https://github.com/Automattic/jetpack-components/compare/1.12.12...1.12.13
+[1.12.12]: https://github.com/Automattic/jetpack-components/compare/1.12.11...1.12.12
 [1.12.11]: https://github.com/Automattic/jetpack-components/compare/1.12.10...1.12.11
 [1.12.10]: https://github.com/Automattic/jetpack-components/compare/1.12.9...1.12.10
 [1.12.9]: https://github.com/Automattic/jetpack-components/compare/1.12.8...1.12.9

package/build/components/action-popover/index.js

@@ -3,10 +3,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * External dependencies
  */
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import Button from '../button/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import Text from '../text/index.js';
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ import Text from '../text/index.js';
 import ThemeProvider from '../theme-provider/index.js';
 import styles from './styles.module.scss';
 const ActionPopover = ({ hideCloseButton = false, title, children, step = null, totalSteps = null, buttonContent = null, buttonDisabled = false, buttonHref = null, buttonExternalLink = false, offset = 32, onClose, onClick, ...otherPopoverProps }) => {
-    const [isSm] = useBreakpointMatch('sm');
+    const isSm = useViewportMatch('small', '<');
     if (!title || !children || !buttonContent) {
         return null;
     }

package/build/components/dialog/index.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useViewportMatch } from '@wordpress/compose';
 import clsx from 'clsx';
 import Col from '../layout/col/index.js';
 import Container from '../layout/container/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import styles from './style.module.scss';
 /**
  * Dialog component.
@@ -15,7 +15,8 @@ import styles from './style.module.scss';
  * @return {ReactNode}                 Rendered dialog
  */
 const Dialog = ({ primary, secondary, isTwoSections = false, ...containerProps }) => {
-    const [isSmall, isLowerThanLarge] = useBreakpointMatch(['sm', 'lg'], [null, '<']);
+    const isSmall = useViewportMatch('small', '<');
+    const isLowerThanLarge = useViewportMatch('large', '<');
     /*
      * By convention, secondary section is not shown when:
      * - layout is a two-sections setup

package/build/components/icon-tooltip/types.d.ts

@@ -1,5 +1,5 @@
-import type { IconType } from '@wordpress/components';
-import type { ReactNode } from 'react';
+import type { Icon } from '@wordpress/icons';
+import type { ComponentProps, ReactNode } from 'react';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right';
 export type IconTooltipProps = {
@@ -26,7 +26,7 @@ export type IconTooltipProps = {
     /**
      * The icon to display. Accepts icon components from `@wordpress/icons`.
      */
-    iconCode?: IconType;
+    iconCode?: ComponentProps<typeof Icon>['icon'];
     /**
      * The title of Popover.
      */

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
 import { createContext, useContext, Children, cloneElement, } from 'react';
 import IconTooltip from '../icon-tooltip/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
 import TermsOfService from '../terms-of-service/index.js';
 import Text from '../text/index.js';
 import styles from './styles.module.scss';
@@ -30,7 +30,7 @@ const getItemLabels = (isComingSoon, isIncluded, featureNameLabel) => {
     };
 };
 export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, index = 0, label = null, tooltipInfo, tooltipTitle, tooltipClassName = '', }) => {
-    const [isLg] = useBreakpointMatch('lg');
+    const isLg = useViewportMatch('large');
     const item = useContext(PricingTableContext)[index];
     const isExplicitlyEmpty = label === '';
     const showTick = isComingSoon || isIncluded;
@@ -61,7 +61,7 @@ export const PricingTableColumn = ({ primary = false, children, className, }) =>
         }) }));
 };
 const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDisclaimer = false, }) => {
-    const [isLg] = useBreakpointMatch('lg');
+    const isLg = useViewportMatch('large');
     return (_jsxs(PricingTableContext.Provider, { value: items, children: [
             _jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
                     '--rows': items.length + 1,

package/build/index.d.ts

@@ -23,7 +23,6 @@ export { default as DecorativeCard } from './components/decorative-card/index.ts
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.ts';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as SplitButton } from './components/split-button/index.tsx';

package/build/index.js

@@ -36,7 +36,6 @@ export { default as DecorativeCard } from './components/decorative-card/index.js
 export { default as Col } from './components/layout/col/index.js';
 export { default as Testimonials } from './components/testimonials/index.js';
 export { default as Container } from './components/layout/container/index.js';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.js';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.js';
 export * from './components/icons/index.js';
 export { default as SplitButton } from './components/split-button/index.js';

package/components/action-popover/index.tsx

@@ -2,10 +2,10 @@
  * External dependencies
  */
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import Button from '../button/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import Text from '../text/index.tsx';
 /**
  * Internal dependencies
@@ -32,7 +32,7 @@ const ActionPopover = ( {
 	onClick,
 	...otherPopoverProps
 }: ActionPopoverProps ) => {
-	const [ isSm ] = useBreakpointMatch( 'sm' );
+	const isSm = useViewportMatch( 'small', '<' );
 
 	if ( ! title || ! children || ! buttonContent ) {
 		return null;

package/components/dialog/index.tsx

@@ -1,7 +1,7 @@
+import { useViewportMatch } from '@wordpress/compose';
 import clsx from 'clsx';
 import Col from '../layout/col/index.tsx';
 import Container from '../layout/container/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import styles from './style.module.scss';
 import type { ReactNode, FC } from 'react';
 
@@ -29,7 +29,8 @@ const Dialog: FC< DialogProps > = ( {
 	isTwoSections = false,
 	...containerProps
 } ) => {
-	const [ isSmall, isLowerThanLarge ] = useBreakpointMatch( [ 'sm', 'lg' ], [ null, '<' ] );
+	const isSmall = useViewportMatch( 'small', '<' );
+	const isLowerThanLarge = useViewportMatch( 'large', '<' );
 
 	/*
 	 * By convention, secondary section is not shown when:

package/components/icon-tooltip/types.ts

@@ -1,5 +1,5 @@
-import type { IconType } from '@wordpress/components';
-import type { ReactNode } from 'react';
+import type { Icon } from '@wordpress/icons';
+import type { ComponentProps, ReactNode } from 'react';
 
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 
@@ -40,7 +40,7 @@ export type IconTooltipProps = {
 	/**
 	 * The icon to display. Accepts icon components from `@wordpress/icons`.
 	 */
-	iconCode?: IconType;
+	iconCode?: ComponentProps< typeof Icon >[ 'icon' ];
 
 	/**
 	 * The title of Popover.

package/components/pricing-table/index.tsx

@@ -1,3 +1,4 @@
+import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -11,7 +12,6 @@ import {
 	CSSProperties,
 } from 'react';
 import IconTooltip from '../icon-tooltip/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import TermsOfService from '../terms-of-service/index.tsx';
 import Text from '../text/index.tsx';
 import styles from './styles.module.scss';
@@ -59,7 +59,7 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
 	tooltipTitle,
 	tooltipClassName = '',
 } ) => {
-	const [ isLg ] = useBreakpointMatch( 'lg' );
+	const isLg = useViewportMatch( 'large' );
 	const item = useContext( PricingTableContext )[ index ];
 	const isExplicitlyEmpty = label === '';
 	const showTick = isComingSoon || isIncluded;
@@ -158,7 +158,7 @@ const PricingTable: FC< PricingTableProps > = ( {
 	children,
 	showIntroOfferDisclaimer = false,
 } ) => {
-	const [ isLg ] = useBreakpointMatch( 'lg' );
+	const isLg = useViewportMatch( 'large' );
 
 	return (
 		<PricingTableContext.Provider value={ items }>

package/index.ts

@@ -38,7 +38,6 @@ export { default as DecorativeCard } from './components/decorative-card/index.ts
 export { default as Col } from './components/layout/col/index.tsx';
 export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match/index.ts';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
 export * from './components/icons/index.tsx';
 export { default as SplitButton } from './components/split-button/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.11",
+	"version": "1.12.13",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -74,9 +74,9 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-api": "^1.0.30",
-		"@automattic/jetpack-boost-score-api": "^1.0.50",
+		"@automattic/jetpack-boost-score-api": "^1.0.51",
 		"@automattic/jetpack-script-data": "^0.6.4",
-		"@automattic/number-formatters": "^1.2.4",
+		"@automattic/number-formatters": "^1.2.5",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
 		"@wordpress/admin-ui": "2.1.0",
@@ -103,7 +103,6 @@
 	"devDependencies": {
 		"@automattic/jetpack-base-styles": "^1.2.7",
 		"@babel/core": "7.29.7",
-		"@babel/preset-react": "7.29.7",
 		"@jest/globals": "30.4.1",
 		"@storybook/addon-docs": "10.3.6",
 		"@storybook/react": "10.3.6",

package/build/components/layout/use-breakpoint-match/index.d.ts

@@ -1,17 +0,0 @@
-type Operators = '<' | '<=' | '>' | '>=';
-/**
- * Hook to match if current viewport is equal, greater or less than expected breakpoint
- *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @return {Array<boolean>} - List of matches, following breakpoints sequence.
- * @example
- *
- * ```es6
- * useBreakpointMatch('sm')
- * useBreakpointMatch('lg', '<')
- * useBreakpointMatch([ 'lg', 'sm' ], [ '<', null ])
- * ```
- */
-declare const useBreakpointMatch: (breakpointToMatch: "lg" | "md" | "sm" | ("lg" | "md" | "sm")[], operatorToMatch?: Operators[] | Operators) => boolean[];
-export default useBreakpointMatch;

package/build/components/layout/use-breakpoint-match/index.js

@@ -1,50 +0,0 @@
-import { useMediaQuery } from '@wordpress/compose';
-import breakpointsValues from '../breakpoints.module.scss';
-const BREAKPOINTS = ['sm', 'md', 'lg'];
-const getMediaByOperator = (breakpoint, operator, matches) => {
-    const breakpointIndex = BREAKPOINTS.indexOf(breakpoint);
-    const breakpointIndexPlusOne = breakpointIndex + 1;
-    const isEqual = operator.includes('=');
-    let allNeededBreakpoints = [];
-    if (operator.startsWith('<')) {
-        allNeededBreakpoints = BREAKPOINTS.slice(0, isEqual ? breakpointIndexPlusOne : breakpointIndex);
-    }
-    if (operator.startsWith('>')) {
-        allNeededBreakpoints = BREAKPOINTS.slice(isEqual ? breakpointIndex : breakpointIndexPlusOne);
-    }
-    return allNeededBreakpoints?.length
-        ? allNeededBreakpoints.some(brk => matches[brk])
-        : matches[breakpoint];
-};
-/**
- * Hook to match if current viewport is equal, greater or less than expected breakpoint
- *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @return {Array<boolean>} - List of matches, following breakpoints sequence.
- * @example
- *
- * ```es6
- * useBreakpointMatch('sm')
- * useBreakpointMatch('lg', '<')
- * useBreakpointMatch([ 'lg', 'sm' ], [ '<', null ])
- * ```
- */
-const useBreakpointMatch = (breakpointToMatch, operatorToMatch) => {
-    const breakpoints = Array.isArray(breakpointToMatch)
-        ? breakpointToMatch
-        : [breakpointToMatch];
-    const operators = Array.isArray(operatorToMatch)
-        ? operatorToMatch
-        : [operatorToMatch];
-    const [smKey, mdKey, lgKey] = BREAKPOINTS;
-    const sm = useMediaQuery(breakpointsValues[smKey]);
-    const md = useMediaQuery(breakpointsValues[mdKey]);
-    const lg = useMediaQuery(breakpointsValues[lgKey]);
-    const matches = { sm, md, lg };
-    return breakpoints.map((breakpoint, idx) => {
-        const operator = operators[idx];
-        return operator ? getMediaByOperator(breakpoint, operator, matches) : matches[breakpoint];
-    });
-};
-export default useBreakpointMatch;

package/components/layout/use-breakpoint-match/README.md

@@ -1,43 +0,0 @@
-# useBreakpointMatch
-
-Utility to match against breakpoints.
-
-[ Storybook Reference ](https://automattic.github.io/jetpack-storybook/?path=/story/js-packages-components-layout--breakpoint-match)
-
-## Usage
-
-```jsx
-import { useBreakpointMatch } from '@automattic/jetpack-components';
-const [ isLg ] = useBreakpointMatch('lg')
-return isLg && <Component />
-```
-
-## Parameters
-
-### breakpointToMatch
-
-Single or Array of breakpoints to match against.
-
-- Type: `String`|`Array<String>`
-- Required: `true`
-
-```javascript
-useBreakpointMatch('lg');
-useBreakpointMatch([ 'lg', 'sm' ]);
-```
-
-### operator
-
-A Single or Array of operators to match less, equal, or greater than the breakpoint.
-
-In Array, it matches against the same index from breakpoint.
-
-- Type: `String`|`Array<String>`
-- Required: `false`
-
-#### Example
-
-```javascript
-useBreakpointMatch('md', '<=');
-useBreakpointMatch([ 'lg', 'sm' ], ['<', '>']);
-```

package/components/layout/use-breakpoint-match/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.module.css' {
-	const classes: { [ key: string ]: string };
-	export default classes;
-}
-
-declare module '*.module.scss' {
-	const classes: { [ key: string ]: string };
-	export default classes;
-}

package/components/layout/use-breakpoint-match/index.ts

@@ -1,79 +0,0 @@
-import { useMediaQuery } from '@wordpress/compose';
-import breakpointsValues from '../breakpoints.module.scss';
-
-const BREAKPOINTS = [ 'sm', 'md', 'lg' ] as const;
-
-type Breakpoints = ( typeof BREAKPOINTS )[ number ];
-
-type Operators = '<' | '<=' | '>' | '>=';
-
-type Matches = { sm: boolean; md: boolean; lg: boolean };
-
-const getMediaByOperator = (
-	breakpoint: Breakpoints,
-	operator: Operators,
-	matches: Matches
-): boolean => {
-	const breakpointIndex = BREAKPOINTS.indexOf( breakpoint );
-	const breakpointIndexPlusOne = breakpointIndex + 1;
-	const isEqual = operator.includes( '=' );
-
-	let allNeededBreakpoints = [];
-
-	if ( operator.startsWith( '<' ) ) {
-		allNeededBreakpoints = BREAKPOINTS.slice(
-			0,
-			isEqual ? breakpointIndexPlusOne : breakpointIndex
-		);
-	}
-
-	if ( operator.startsWith( '>' ) ) {
-		allNeededBreakpoints = BREAKPOINTS.slice( isEqual ? breakpointIndex : breakpointIndexPlusOne );
-	}
-
-	return allNeededBreakpoints?.length
-		? allNeededBreakpoints.some( brk => matches[ brk ] )
-		: matches[ breakpoint ];
-};
-
-/**
- * Hook to match if current viewport is equal, greater or less than expected breakpoint
- *
- * @param {(Breakpoints | Array< Breakpoints >)} breakpointToMatch - An single breakpoint or list of breakpoints to match.
- * @param {(Operators | Array< Operators >)}     operatorToMatch   - An single operator or list of them. It should follow the same sequence than breakpoints.
- * @return {Array<boolean>} - List of matches, following breakpoints sequence.
- * @example
- *
- * ```es6
- * useBreakpointMatch('sm')
- * useBreakpointMatch('lg', '<')
- * useBreakpointMatch([ 'lg', 'sm' ], [ '<', null ])
- * ```
- */
-const useBreakpointMatch = (
-	breakpointToMatch: Breakpoints | Array< Breakpoints >,
-	operatorToMatch?: Operators | Array< Operators >
-) => {
-	const breakpoints: Array< Breakpoints > = Array.isArray( breakpointToMatch )
-		? breakpointToMatch
-		: [ breakpointToMatch ];
-
-	const operators: Array< Operators > = Array.isArray( operatorToMatch )
-		? operatorToMatch
-		: [ operatorToMatch ];
-
-	const [ smKey, mdKey, lgKey ] = BREAKPOINTS;
-
-	const sm = useMediaQuery( breakpointsValues[ smKey ] );
-	const md = useMediaQuery( breakpointsValues[ mdKey ] );
-	const lg = useMediaQuery( breakpointsValues[ lgKey ] );
-
-	const matches: Matches = { sm, md, lg };
-
-	return breakpoints.map( ( breakpoint, idx ) => {
-		const operator = operators[ idx ];
-		return operator ? getMediaByOperator( breakpoint, operator, matches ) : matches[ breakpoint ];
-	} );
-};
-
-export default useBreakpointMatch;