@automattic/charts 4.15.0 → 4.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.15.0",
+	"version": "4.15.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -111,7 +111,6 @@
 		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "44.0.0",
 		"@wordpress/element": "10.1.0",
 		"@wordpress/private-apis": "3.1.0",
 		"@wordpress/theme-build-tools": "1.0.0",

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -1,3 +1,6 @@
+// Room for the chevron an interactive row reveals on hover or focus.
+$hover-reserve: var(--wpds-dimension-gap-2xl);
+
 .leaderboardChart {
 	transition:
 		opacity var(--wpds-motion-duration-lg)
@@ -28,6 +31,17 @@
 	}
 }
 
+.grid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	row-gap: var(--a8c-charts-dimension-leaderboard-row-gap);
+	column-gap: var(--a8c-charts-dimension-leaderboard-column-gap);
+
+	&--comparison {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+	}
+}
+
 .barWithLabelContainer {
 	display: grid;
 	align-items: center;
@@ -233,6 +247,33 @@ $focus-ring-width: var(--wpds-border-width-focus);
 			var(--wpds-motion-easing-subtle);
 	}
 
+	.barWithLabelContainer > :not(.bar, .barTrack) {
+		max-inline-size: 100%;
+		transition:
+			max-inline-size var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle);
+	}
+
+	// Single-line, so the hover cap below moves the ellipsis instead of
+	// rewrapping the label and growing the row.
+	.label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	// The label stays clear of the slid value on any hover or focus, nested
+	// controls included: lifting it while a trailing action is hovered would
+	// move that action out from under the pointer.
+	&:hover,
+	&:focus-visible,
+	&:has(:focus-visible) {
+
+		.barWithLabelContainer > :not(.bar, .barTrack) {
+			max-inline-size: calc(100% - #{$hover-reserve});
+		}
+	}
+
 	.valueContainer {
 		transition:
 			transform var(--wpds-motion-duration-sm)
@@ -246,7 +287,7 @@ $focus-ring-width: var(--wpds-border-width-focus);
 
 		// Fixed reserve for the chevron — the value slides by it in full, and the
 		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
-		--a8c-charts-dimension-leaderboard-bar-hover-inset: var(--wpds-dimension-gap-2xl);
+		--a8c-charts-dimension-leaderboard-bar-hover-inset: #{$hover-reserve};
 
 		.bar {
 			opacity: 0.5;
@@ -343,6 +384,7 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	.interactiveRow {
 
 		.bar,
+		.barWithLabelContainer > :not(.bar, .barTrack),
 		.valueContainer,
 		.chevron {
 			transition: none;

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -1,8 +1,6 @@
-/* eslint-disable @wordpress/no-unsafe-wp-apis */
-import { __experimentalGrid as Grid, VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
-import { Stack, Text } from '@wordpress/ui';
+import { Stack, Text, VisuallyHidden } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC, type MouseEvent } from 'react';
 import { Legend } from '../../components/legend';
@@ -30,12 +28,6 @@ import {
 import type { LeaderboardChartProps } from './types';
 import type { LeaderboardEntry } from '../../types';
 
-// Handed to `Grid` as a chain rather than set in this component's stylesheet: `Grid` writes
-// its own gaps through an Emotion class, which a module class of equal specificity would not
-// reliably outrank. The chain lands on the element and resolves there.
-const ROW_GAP = 'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)';
-const COLUMN_GAP = 'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)';
-
 /** Indexed by `Math.sign( delta ) + 1`, so [negative, neutral, positive]. */
 const DELTA_TREND_CLASS = [ 'deltaValue--down', 'deltaValue--neutral', 'deltaValue--up' ] as const;
 
@@ -107,8 +99,22 @@ function forwardCellClickToRowButton( event: MouseEvent< HTMLDivElement > ) {
 	event.currentTarget.querySelector< HTMLButtonElement >( ':scope > button' )?.click();
 }
 
-const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
-	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
+const BarLabel = ( {
+	label,
+	isInteractiveRow,
+}: {
+	label: LeaderboardEntry[ 'label' ];
+	isInteractiveRow: boolean;
+} ) => (
+	<>
+		{ typeof label === 'string' ? (
+			<Text className={ styles.label } title={ isInteractiveRow ? label : undefined }>
+				{ label }
+			</Text>
+		) : (
+			label
+		) }
+	</>
 );
 
 /** The largest negative and positive share magnitudes, which size each side of zero. */
@@ -213,7 +219,7 @@ const BarWithLabel = ( {
 			} ) }
 			data-testid={ divergingScale ? 'leaderboard-chart-diverging-row' : undefined }
 		>
-			<BarLabel label={ entry.label } />
+			<BarLabel label={ entry.label } isInteractiveRow={ Boolean( entry.onClick ) } />
 			{ bars }
 		</div>
 	);
@@ -388,8 +394,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	// Comparing adds a delta track so the values and the deltas each line up in a column
 	// of their own; with either series hidden the grid keeps its two tracks.
 	const showComparisonColumn = withComparison && isComparisonVisible;
-	const templateColumns =
-		showComparisonColumn && isPrimaryVisible ? 'minmax(0, 1fr) auto auto' : 'minmax(0, 1fr) auto';
+	const hasDeltaColumn = showComparisonColumn && isPrimaryVisible;
 
 	// Handle empty or undefined data
 	if ( ! data || data.length === 0 ) {
@@ -480,13 +485,13 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 							{ getAllHiddenMessage( legendInteractive, 'series' ) }
 						</div>
 					) : (
-						<Grid
+						<div
 							role="list"
 							aria-label={ ariaLabel ?? __( 'Leaderboard chart', 'jetpack-charts' ) }
-							templateColumns={ templateColumns }
-							rowGap={ ROW_GAP }
-							columnGap={ COLUMN_GAP }
 							data-leaderboard-grid
+							className={ clsx( styles.grid, {
+								[ styles[ 'grid--comparison' ] ]: hasDeltaColumn,
+							} ) }
 						>
 							{ resolvedData.map( ( entry, rowIndex ) => {
 								// visibility, not clipping: hidden rows keep their geometry (so a
@@ -544,7 +549,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 													) }
 												>
 													<span aria-hidden="true">—</span>
-													<VisuallyHidden as="span">
+													<VisuallyHidden render={ <span /> }>
 														{ hasPreviousPeriodValue
 															? __( 'Percentage change unavailable', 'jetpack-charts' )
 															: __( 'No comparison data', 'jetpack-charts' ) }
@@ -616,7 +621,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 									</div>
 								);
 							} ) }
-						</Grid>
+						</div>
 					) }
 				</div>
 			</ChartLayout>

package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx

@@ -802,18 +802,25 @@ describe( 'LeaderboardChart', () => {
 			);
 			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
 		} );
+
+		it( 'titles only an interactive row’s string label with its full text', () => {
+			const [ interactive, inert ] = mockData;
+			render( <LeaderboardChart data={ [ { ...interactive, onClick: jest.fn() }, inert ] } /> );
+			expect( screen.getByText( String( interactive.label ) ) ).toHaveAttribute(
+				'title',
+				interactive.label
+			);
+			expect( screen.getByText( String( inert.label ) ) ).not.toHaveAttribute( 'title' );
+		} );
 	} );
 
-	describe( 'grid gaps', () => {
-		// eslint-disable-next-line testing-library/no-node-access -- The grid is rendered by `Grid` from @wordpress/components, which takes no test id.
-		const grid = () => document.querySelector< HTMLElement >( '[data-leaderboard-grid]' );
-		const templateColumns = () =>
-			grid().style.getPropertyValue( '--wp-components-grid-template-columns' );
+	describe( 'grid columns', () => {
+		const grid = () => screen.getByRole( 'list', { name: 'Leaderboard chart' } );
 
 		it( 'lays the rows out without a delta track when not comparing', () => {
 			render( <LeaderboardChart data={ mockData } withComparison={ false } /> );
 
-			expect( templateColumns() ).toBe( 'minmax(0, 1fr) auto' );
+			expect( grid() ).not.toHaveClass( 'grid--comparison' );
 		} );
 
 		it.each( [ [ 'Previous period' ], [ 'Current period' ] ] )(
@@ -829,24 +836,12 @@ describe( 'LeaderboardChart', () => {
 					/>
 				);
 
-				expect( templateColumns() ).toBe( 'minmax(0, 1fr) auto auto' );
+				expect( grid() ).toHaveClass( 'grid--comparison' );
 
 				await user.click( screen.getByRole( 'button', { name: new RegExp( legendItem ) } ) );
 
-				expect( templateColumns() ).toBe( 'minmax(0, 1fr) auto' );
+				expect( grid() ).not.toHaveClass( 'grid--comparison' );
 			}
 		);
-
-		it( 'hands the catalog role to the grid', () => {
-			render( <LeaderboardChart data={ mockData } /> );
-
-			// Grid writes its gaps into custom properties and reads them from a stylesheet.
-			expect( grid().style.getPropertyValue( '--wp-components-grid-row-gap' ) ).toBe(
-				'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)'
-			);
-			expect( grid().style.getPropertyValue( '--wp-components-grid-column-gap' ) ).toBe(
-				'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)'
-			);
-		} );
 	} );
 } );