@automattic/charts 1.10.1 → 1.10.3

package/src/charts/private/with-responsive/test/with-responsive.test.tsx

@@ -5,7 +5,7 @@ import type { BaseChartProps } from '../../../../types';
 // Mock the useParentSize hook
 jest.mock( '@visx/responsive', () => ( {
 	useParentSize: jest.fn( () => ( {
-		parentRef: { current: null },
+		parentRef: () => {},
 		width: 600, // Default width for tests
 		height: 300, // Default height for tests
 	} ) ),
@@ -20,6 +20,32 @@ describe( 'withResponsive', () => {
 
 	const ResponsiveComponent = withResponsive( MockComponent );
 
+	const { useParentSize } = jest.requireMock( '@visx/responsive' );
+	const DEFAULT_SIZE = { parentRef: () => {}, width: 600, height: 300 };
+
+	// jsdom has no layout engine, so the wrapper's clientHeight (which the contain
+	// logic reads from real layout) is always 0. Mock it to simulate the height the
+	// parent makes available: 0 means unconstrained (the chart derives its height from
+	// width), a positive value simulates a parent that limits the height.
+	let mockClientHeight = 0;
+	beforeAll( () => {
+		Object.defineProperty( window.HTMLElement.prototype, 'clientHeight', {
+			configurable: true,
+			get() {
+				return mockClientHeight;
+			},
+		} );
+	} );
+
+	// Fully clear the mock (queued returns and implementation) after each test, then
+	// re-establish the default implementation, so a per-test override can't bleed
+	// into the next test.
+	afterEach( () => {
+		mockClientHeight = 0;
+		useParentSize.mockReset();
+		useParentSize.mockImplementation( () => DEFAULT_SIZE );
+	} );
+
 	describe( 'component dimensions', () => {
 		test( 'passes measured parent width to component', () => {
 			render( <ResponsiveComponent data={ [] } /> );
@@ -34,11 +60,35 @@ describe( 'withResponsive', () => {
 			expect( component ).toHaveStyle( { height: '300px' } );
 		} );
 
-		test( 'calculates height from aspectRatio when provided', () => {
+		test( 'derives height from width when the parent is taller than the derived height', () => {
+			// Parent allows 300px of height; aspectRatio 0.4 derives 600 * 0.4 = 240,
+			// which fits, so the chart keeps the full measured width.
+			mockClientHeight = 300;
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			const component = screen.getByTestId( 'mock-component' );
+			expect( component ).toHaveStyle( { width: '600px', height: '240px' } );
+		} );
+
+		test( 'contains within the parent height when the parent limits the available height', () => {
+			// Parent makes 300px of height available; aspectRatio 0.75 would derive
+			// 600 * 0.75 = 450, so both axes shrink to fit: 300 / 0.75 = 400.
+			mockClientHeight = 300;
 			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
 			const component = screen.getByTestId( 'mock-component' );
-			// With aspectRatio, height = width * aspectRatio = 600 * 0.75 = 450
-			expect( component ).toHaveStyle( { height: '450px' } );
+			expect( component ).toHaveStyle( { width: '400px', height: '300px' } );
+		} );
+
+		test( 'derives height from width when the parent has no measured height', () => {
+			// parentHeight 0 (unconstrained or not-yet-measured parent): the contain
+			// clamp must not run, so the height stays width-derived (600 * 0.4 = 240).
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 0,
+			} ) );
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			const component = screen.getByTestId( 'mock-component' );
+			expect( component ).toHaveStyle( { width: '600px', height: '240px' } );
 		} );
 
 		test( 'respects maxWidth configuration', () => {
@@ -52,13 +102,28 @@ describe( 'withResponsive', () => {
 			const component = screen.getByTestId( 'mock-component' );
 			expect( component ).toHaveAttribute( 'data-size', '200' );
 		} );
+
+		test( 'assigns the wrapper to an object-shaped parentRef from useParentSize', () => {
+			// useParentSize hands back a callback ref in practice, but older versions
+			// return a RefObject; the wrapper must populate that shape too.
+			const objectRef: { current: HTMLElement | null } = { current: null };
+			useParentSize.mockImplementation( () => ( {
+				parentRef: objectRef,
+				width: 600,
+				height: 300,
+			} ) );
+			render( <ResponsiveComponent data={ [] } /> );
+			expect( objectRef.current ).toBe( screen.getByTestId( 'responsive-wrapper' ) );
+		} );
 	} );
 
 	describe( 'wrapper dimensions', () => {
-		test( 'wrapper defaults to 100% width and height when no props', () => {
+		test( 'wrapper has no inline dimensions by default (fills the parent via CSS)', () => {
 			render( <ResponsiveComponent data={ [] } /> );
 			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { width: '100%', height: '100%' } );
+			expect( wrapper ).toHaveClass( 'container' );
+			expect( wrapper ).not.toHaveClass( 'isContained' );
+			expect( wrapper ).not.toHaveAttribute( 'style' );
 		} );
 
 		test( 'wrapper uses explicit width/height for dimensions when provided', () => {
@@ -67,24 +132,170 @@ describe( 'withResponsive', () => {
 			expect( wrapper ).toHaveStyle( { width: '200px', height: '200px' } );
 		} );
 
-		test( 'wrapper uses auto height with aspectRatio', () => {
+		test( 'wrapper gets the contained class with aspectRatio (centering lives in CSS)', () => {
 			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.5 } /> );
 			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { width: '100%', height: 'auto' } );
+			expect( wrapper ).toHaveClass( 'isContained' );
 		} );
 
-		test( 'wrapper expresses aspectRatio in CSS and caps at maxWidth', () => {
-			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.5 } maxWidth={ 800 } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			// CSS aspect-ratio is width/height, so 1 / 0.5 = 2.
-			expect( wrapper ).toHaveStyle( { aspectRatio: '2', maxWidth: '800px' } );
+		test( 'no content box is rendered without an aspectRatio', () => {
+			render( <ResponsiveComponent data={ [] } /> );
+			expect( screen.queryByTestId( 'responsive-content' ) ).not.toBeInTheDocument();
 		} );
 
-		test( 'wrapper omits the maxWidth cap when an explicit width is set', () => {
-			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.5 } width={ 300 } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { aspectRatio: '2', width: '300px' } );
-			expect( wrapper ).not.toHaveStyle( { maxWidth: '1200px' } );
+		test( 'renders the contained chart in an inner content box sized to the aspect ratio', () => {
+			// aspectRatio 0.4: 600 * 0.4 = 240 fits the 300px parent.
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			const content = screen.getByTestId( 'responsive-content' );
+			expect( content ).toHaveStyle( { width: '600px', height: '240px' } );
+		} );
+
+		test( 'content box contains to the parent height when the parent limits the available height', () => {
+			// aspectRatio 0.75 derives 450 > the 300px the parent allows, so both axes
+			// shrink to fit: width 400 (300 / 0.75) × height 300.
+			mockClientHeight = 300;
+			render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			const content = screen.getByTestId( 'responsive-content' );
+			expect( content ).toHaveStyle( { width: '400px', height: '300px' } );
+		} );
+	} );
+
+	describe( 'resize behavior', () => {
+		test( 'grows on widen in a fluid (unconstrained-height) parent', () => {
+			// Unconstrained parent (mockClientHeight 0): the chart derives its height
+			// from width and must grow when the parent widens, not deadlock.
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 0,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '600px',
+				height: '240px',
+			} );
+
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 900,
+				height: 0,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '900px',
+				height: '360px',
+			} );
+		} );
+
+		test( 'stays contained on widen when the parent limits the height', () => {
+			// Parent allows 150px of height. aspectRatio 0.4 derives 240 at width 600 and
+			// 360 at width 900 — both exceed 150 — so the chart stays contained at
+			// 375 × 150 (150 / 0.4 = 375) across the widen rather than overflowing.
+			mockClientHeight = 150;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 150,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '375px',
+				height: '150px',
+			} );
+
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 900,
+				height: 150,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '375px',
+				height: '150px',
+			} );
+		} );
+
+		test( 'releases containment when the parent grows tall enough', () => {
+			// Parent starts at 150px of height, so aspectRatio 0.4 (derives 240 at width
+			// 600) is contained to 375 × 150.
+			mockClientHeight = 150;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 150,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '375px',
+				height: '150px',
+			} );
+
+			// Parent grows to 300px — now taller than the 240px derived height — so
+			// containment releases and the chart returns to its full width-derived size.
+			mockClientHeight = 300;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 300,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.4 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '600px',
+				height: '240px',
+			} );
+		} );
+
+		test( 'and re-contains to the new height when the parent shrinks further', () => {
+			// Parent allows 300px; aspectRatio 0.75 derives 450, so it contains to 400 × 300.
+			mockClientHeight = 300;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 300,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '400px',
+				height: '300px',
+			} );
+
+			// Parent shrinks to 150px — still shorter than the 450px derived height — so the
+			// chart re-contains to the new available height: 150 / 0.75 = 200 × 150.
+			mockClientHeight = 150;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 150,
+			} ) );
+			rerender( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '200px',
+				height: '150px',
+			} );
+		} );
+
+		test( 'releases containment when aspectRatio is removed', () => {
+			// Contained first (derived 450 > the 300px parent → 400 × 300).
+			mockClientHeight = 300;
+			useParentSize.mockImplementation( () => ( {
+				parentRef: () => {},
+				width: 600,
+				height: 300,
+			} ) );
+			const { rerender } = render( <ResponsiveComponent data={ [] } aspectRatio={ 0.75 } /> );
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '400px',
+				height: '300px',
+			} );
+
+			// Dropping aspectRatio clears the containment and fills the parent again; the
+			// inner content box is gone.
+			rerender( <ResponsiveComponent data={ [] } /> );
+			expect( screen.queryByTestId( 'responsive-content' ) ).not.toBeInTheDocument();
+			expect( screen.getByTestId( 'mock-component' ) ).toHaveStyle( {
+				width: '600px',
+				height: '300px',
+			} );
 		} );
 	} );
 

package/src/charts/private/with-responsive/with-responsive.module.scss

@@ -1,5 +1,24 @@
 .container {
-	// Allow wrapper to shrink in flex layouts
+	// Fill the parent by default so the wrapper's live height reflects the
+	// real available space. JS sets width/height only when passed explicitly.
+	width: 100%;
+	height: 100%;
+	// Allow the wrapper to shrink in flex layouts
+	min-width: 0;
+	min-height: 0;
+}
+
+// With an aspectRatio, center the contained box horizontally and top-align it.
+.isContained {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+}
+
+// The contain box. Its width/height come from JS; keep it from being stretched
+// or shrunk by the flex parent.
+.content {
+	flex: 0 0 auto;
 	min-width: 0;
 	min-height: 0;
 }

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -1,4 +1,6 @@
 import { useParentSize } from '@visx/responsive';
+import clsx from 'clsx';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styles from './with-responsive.module.scss';
 import type { BaseChartProps } from '../../../types';
 import type { ComponentType } from 'react';
@@ -16,7 +18,11 @@ export type ResponsiveConfig = {
 	maxWidth?: number;
 	/**
 	 * The aspect ratio of the chart (height = width * aspectRatio).
-	 * When provided, height is calculated from width.
+	 * When provided, the chart keeps this ratio and is contained within the
+	 * parent on both axes: it fills the available width and derives its height,
+	 * but if the parent is shorter than that derived height it shrinks both axes
+	 * to fit rather than overflowing. When it is narrower than the parent (the
+	 * height-constrained case) it is centered horizontally.
 	 * When omitted, the chart fills the parent container's height.
 	 */
 	aspectRatio?: number;
@@ -26,35 +32,9 @@ export type ResponsiveConfig = {
 	resizeDebounceTime?: number;
 };
 
-const useResponsiveDimensions = ( {
-	resizeDebounceTime = 300,
-	maxWidth = 1200,
-	aspectRatio,
-}: ResponsiveConfig ) => {
-	const {
-		parentRef,
-		width: parentWidth,
-		height: parentHeight,
-	} = useParentSize( {
-		debounceTime: resizeDebounceTime,
-		enableDebounceLeadingCall: true,
-	} );
-
-	const containerWidth = parentWidth > 0 ? Math.min( parentWidth, maxWidth ) : 0;
-	const containerHeight = aspectRatio !== undefined ? containerWidth * aspectRatio : parentHeight;
-
-	return {
-		parentRef,
-		width: containerWidth,
-		height: containerHeight,
-		/**
-		 * Whether an aspectRatio was provided. Used to determine container
-		 * height styling: 'auto' when true (height derived from width),
-		 * '100%' when false (fill parent container).
-		 */
-		hasAspectRatio: aspectRatio !== undefined,
-	};
-};
+// useLayoutEffect on the client (so containment is resolved before paint, no flash),
+// useEffect on the server to avoid React's SSR warning.
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 /**
  * A higher-order component that provides responsive dimensions
@@ -77,51 +57,120 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 	}: Omit< T, 'width' | 'height' | 'size' > & DimensionProps & ResponsiveConfig ) {
 		const {
 			parentRef,
-			width: measuredWidth,
-			height: measuredHeight,
-			hasAspectRatio,
-		} = useResponsiveDimensions( {
-			resizeDebounceTime,
-			maxWidth,
-			aspectRatio,
+			width: parentWidth,
+			height: parentHeight,
+		} = useParentSize( {
+			debounceTime: resizeDebounceTime,
+			enableDebounceLeadingCall: true,
 		} );
 
-		// Use measured dimensions, but fall back to explicit width/height props if measurement returns 0
-		// (e.g., during initial render or in test environments without DOM measurement).
-		// Do not use size here — size controls chart element dimensions (e.g. pie diameter), not container dimensions.
-		const effectiveWidth = measuredWidth || width || 0;
-		const effectiveHeight = measuredHeight || height || 0;
+		const hasAspectRatio = aspectRatio !== undefined && aspectRatio > 0;
+
+		// Keep our own handle on the wrapper so we can read its live height below, and
+		// still hand the node to useParentSize's ref (a callback ref in practice; guard
+		// the object-ref shape too).
+		const wrapperRef = useRef< HTMLDivElement | null >( null );
+		const setWrapperRef = useCallback(
+			( node: HTMLDivElement | null ) => {
+				wrapperRef.current = node;
+				if ( typeof parentRef === 'function' ) {
+					parentRef( node );
+				} else if ( parentRef ) {
+					( parentRef as { current: HTMLDivElement | null } ).current = node;
+				}
+			},
+			[ parentRef ]
+		);
 
-		const defaultHeight = hasAspectRatio ? 'auto' : '100%';
-		// Express the aspect ratio in CSS so the container height tracks its width
-		// fluidly, rather than snapping to a debounced measured height. Cap the width
-		// at maxWidth so the CSS-derived height matches the maxWidth-capped content
-		// (the wrapped chart is sized from the capped `measuredWidth`).
-		const aspectRatioStyle =
-			hasAspectRatio && aspectRatio
-				? {
-						aspectRatio: `${ 1 / aspectRatio }`,
-						maxWidth: width === undefined ? maxWidth : undefined,
-				  }
-				: null;
+		// The parent's available height when it actually constrains the chart, else
+		// null (the chart derives its height from width and grows freely).
+		const [ containedHeight, setContainedHeight ] = useState< number | null >( null );
+
+		// Cap the available width at maxWidth unless an explicit width pins it. Before
+		// measurement resolves, fall back to the explicit width.
+		const cap = width === undefined ? maxWidth : Infinity;
+		const availableWidth = parentWidth > 0 ? Math.min( parentWidth, cap ) : width ?? 0;
+
+		let boxWidth = availableWidth;
+		let boxHeight: number;
+		if ( hasAspectRatio ) {
+			const derivedHeight = availableWidth * aspectRatio;
+			if ( containedHeight !== null && derivedHeight > containedHeight ) {
+				boxHeight = containedHeight;
+				boxWidth = boxHeight / aspectRatio;
+			} else {
+				boxHeight = derivedHeight;
+			}
+		} else {
+			boxHeight = parentHeight > 0 ? parentHeight : height ?? 0;
+		}
+
+		// Decide containment from the wrapper's real height, measured after layout.
+		// useParentSize's height is no good here: with height:100% and no definite
+		// parent height it just echoes our own content back, so clamping against it
+		// would freeze the chart at its current width when the container widens.
+		// Compare the post-layout clientHeight to the height we drew: shorter means the
+		// parent really constrains us → contain to it; equal means it is only our own
+		// content → let it grow. Once contained, stay contained until the parent is tall
+		// enough for the full derived height, so a now-fitting chart doesn't oscillate.
+		// (parentHeight is in the deps only to re-run this; the value used is clientHeight.)
+		useIsomorphicLayoutEffect( () => {
+			if ( ! hasAspectRatio ) {
+				if ( containedHeight !== null ) {
+					setContainedHeight( null );
+				}
+				return;
+			}
+			const available = wrapperRef.current?.clientHeight ?? 0;
+			const derivedHeight = availableWidth * aspectRatio;
+			if ( containedHeight === null ) {
+				if ( available > 0 && derivedHeight > available + 1 ) {
+					setContainedHeight( available );
+				}
+			} else if ( available >= derivedHeight - 1 ) {
+				setContainedHeight( null );
+			} else if ( Math.abs( available - containedHeight ) > 1 ) {
+				setContainedHeight( available );
+			}
+		}, [ hasAspectRatio, availableWidth, aspectRatio, containedHeight, parentHeight ] );
+
+		const wrappedComponent = (
+			<WrappedComponent
+				width={ boxWidth }
+				height={ boxHeight }
+				size={ size }
+				{ ...( chartProps as T ) }
+			/>
+		);
 
+		// The outer element fills the parent (via CSS) so its live height reflects the
+		// real available space; JS sets width/height only when they are passed
+		// explicitly. Static layout (fill, flex centering) lives in the stylesheet. With
+		// an aspectRatio the chart is placed in an inner box sized to the contained
+		// dimensions (centered by CSS) so it keeps its proportions and fits within the
+		// parent on both axes. Charts that fill their container via CSS (e.g. the heatmap
+		// grid) then track that box. Without an aspectRatio the chart fills the parent.
 		return (
 			<div
-				ref={ parentRef }
+				ref={ setWrapperRef }
 				data-testid="responsive-wrapper"
-				className={ styles.container }
+				className={ clsx( styles.container, hasAspectRatio && styles.isContained ) }
 				style={ {
-					width: width ?? '100%',
-					height: height ?? defaultHeight,
-					...aspectRatioStyle,
+					...( width !== undefined ? { width } : null ),
+					...( height !== undefined ? { height } : null ),
 				} }
 			>
-				<WrappedComponent
-					width={ effectiveWidth }
-					height={ effectiveHeight }
-					size={ size }
-					{ ...( chartProps as T ) }
-				/>
+				{ hasAspectRatio ? (
+					<div
+						data-testid="responsive-content"
+						className={ styles.content }
+						style={ { width: boxWidth, height: boxHeight } }
+					>
+						{ wrappedComponent }
+					</div>
+				) : (
+					wrappedComponent
+				) }
 			</div>
 		);
 	};