@automattic/charts 0.57.0 → 0.59.0

package/src/charts/private/chart-composition/render-legend-slot.ts

@@ -0,0 +1,22 @@
+import { createElement, Fragment } from 'react';
+import type { LegendChild } from './use-chart-children';
+import type { LegendPosition } from '../../../types';
+import type { ReactNode } from 'react';
+
+/**
+ * Renders legend children filtered by position slot.
+ *
+ * @param {LegendChild[]}  legendChildren - The legend children to filter and render
+ * @param {LegendPosition} position       - The position slot to render
+ * @return {ReactNode[]} Array of legend elements for the given position
+ */
+export function renderLegendSlot(
+	legendChildren: LegendChild[],
+	position: LegendPosition
+): ReactNode[] {
+	return legendChildren
+		.filter( l => l.position === position )
+		.map( ( l, i ) =>
+			createElement( Fragment, { key: `legend-${ position }-${ i }` }, l.element )
+		);
+}

package/src/charts/private/chart-composition/test/render-legend-slot.test.tsx

@@ -0,0 +1,60 @@
+import { createElement } from 'react';
+import { renderLegendSlot } from '../render-legend-slot';
+import type { LegendChild } from '../use-chart-children';
+
+const makeLegend = ( position: 'top' | 'bottom', label: string ): LegendChild => ( {
+	element: createElement( 'div', null, label ),
+	position,
+} );
+
+describe( 'renderLegendSlot', () => {
+	it( 'should return an empty array when given no children', () => {
+		expect( renderLegendSlot( [], 'top' ) ).toHaveLength( 0 );
+	} );
+
+	it( 'should return an empty array when no children match the position', () => {
+		const children = [ makeLegend( 'bottom', 'Legend 1' ) ];
+
+		expect( renderLegendSlot( children, 'top' ) ).toHaveLength( 0 );
+	} );
+
+	it( 'should return a single matching child', () => {
+		const children = [ makeLegend( 'top', 'Legend 1' ) ];
+		const view = renderLegendSlot( children, 'top' );
+
+		expect( view ).toHaveLength( 1 );
+		expect( view[ 0 ] ).toHaveProperty( 'key', 'legend-top-0' );
+	} );
+
+	it( 'should return multiple matching children in order', () => {
+		const children = [ makeLegend( 'bottom', 'Legend 1' ), makeLegend( 'bottom', 'Legend 2' ) ];
+		const view = renderLegendSlot( children, 'bottom' );
+
+		expect( view ).toHaveLength( 2 );
+		expect( view[ 0 ] ).toHaveProperty( 'key', 'legend-bottom-0' );
+		expect( view[ 1 ] ).toHaveProperty( 'key', 'legend-bottom-1' );
+	} );
+
+	it( 'should filter out children with a different position', () => {
+		const children = [
+			makeLegend( 'top', 'Top Legend' ),
+			makeLegend( 'bottom', 'Bottom Legend' ),
+			makeLegend( 'top', 'Another Top Legend' ),
+		];
+
+		expect( renderLegendSlot( children, 'top' ) ).toHaveLength( 2 );
+		expect( renderLegendSlot( children, 'bottom' ) ).toHaveLength( 1 );
+	} );
+
+	it( 'should produce distinct keys for top and bottom slots', () => {
+		const children = [ makeLegend( 'top', 'Top' ), makeLegend( 'bottom', 'Bottom' ) ];
+		const [ topElement, bottomElement ] = [
+			renderLegendSlot( children, 'top' )[ 0 ],
+			renderLegendSlot( children, 'bottom' )[ 0 ],
+		];
+
+		expect( topElement ).toHaveProperty( 'key', 'legend-top-0' );
+		expect( bottomElement ).toHaveProperty( 'key', 'legend-bottom-0' );
+		expect( topElement ).not.toEqual( bottomElement );
+	} );
+} );

package/src/charts/private/chart-composition/test/use-chart-children.test.tsx

@@ -1,5 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { Group } from '@visx/group';
+import { Legend } from '../../../../components/legend';
 import { ChartSVG, ChartHTML } from '../index';
 import { useChartChildren } from '../use-chart-children';
 
@@ -22,6 +23,7 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 1 );
 		expect( result.current.htmlChildren ).toHaveLength( 0 );
+		expect( result.current.legendChildren ).toHaveLength( 0 );
 		expect( result.current.otherChildren ).toHaveLength( 0 );
 	} );
 
@@ -58,6 +60,7 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 1 );
 		expect( result.current.htmlChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren ).toHaveLength( 0 );
 		expect( result.current.otherChildren ).toHaveLength( 0 );
 	} );
 
@@ -112,6 +115,7 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 0 );
 		expect( result.current.htmlChildren ).toHaveLength( 0 );
+		expect( result.current.legendChildren ).toHaveLength( 0 );
 		expect( result.current.otherChildren ).toHaveLength( 0 );
 	} );
 
@@ -128,4 +132,91 @@ describe( 'useChartChildren', () => {
 
 		expect( result.current.svgChildren ).toHaveLength( 3 );
 	} );
+
+	it( 'should extract Legend children to legendChildren with default position bottom', () => {
+		const children = <Legend />;
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'bottom' );
+		expect( result.current.otherChildren ).toHaveLength( 0 );
+	} );
+
+	it( 'should extract Legend children with position top', () => {
+		const children = <Legend position="top" />;
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'top' );
+		expect( result.current.otherChildren ).toHaveLength( 0 );
+	} );
+
+	it( 'should default to bottom for invalid position values', () => {
+		// @ts-expect-error -- testing invalid runtime value
+		const children = <Legend position="left" />;
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'bottom' );
+	} );
+
+	it( 'should exclude Legend children from nonLegendChildren', () => {
+		const children = [
+			<Legend key="legend" position="top" />,
+			<div key="other">Other Content</div>,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 1 );
+		expect( result.current.nonLegendChildren ).toHaveLength( 1 );
+	} );
+
+	it( 'should preserve original child order in nonLegendChildren', () => {
+		const children = [
+			<div key="first">First</div>,
+			<Legend key="legend" position="top" />,
+			<Group key="group">
+				<text>SVG</text>
+			</Group>,
+			<div key="last">Last</div>,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.nonLegendChildren ).toHaveLength( 3 );
+		// Verify order matches original (minus the Legend)
+		expect( ( result.current.nonLegendChildren[ 0 ] as React.ReactElement ).key ).toBe( 'first' );
+		expect( ( result.current.nonLegendChildren[ 1 ] as React.ReactElement ).key ).toBe( 'group' );
+		expect( ( result.current.nonLegendChildren[ 2 ] as React.ReactElement ).key ).toBe( 'last' );
+	} );
+
+	it( 'should return empty nonLegendChildren when all children are Legends', () => {
+		const children = [
+			<Legend key="top" position="top" />,
+			<Legend key="bottom" position="bottom" />,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 2 );
+		expect( result.current.nonLegendChildren ).toHaveLength( 0 );
+	} );
+
+	it( 'should extract multiple Legend children by position', () => {
+		const children = [
+			<Legend key="top" position="top" />,
+			<Legend key="bottom" position="bottom" />,
+		];
+
+		const { result } = renderHook( () => useChartChildren( children, 'TestChart' ) );
+
+		expect( result.current.legendChildren ).toHaveLength( 2 );
+		expect( result.current.legendChildren[ 0 ].position ).toBe( 'top' );
+		expect( result.current.legendChildren[ 1 ].position ).toBe( 'bottom' );
+		expect( result.current.otherChildren ).toHaveLength( 0 );
+	} );
 } );

package/src/charts/private/chart-composition/use-chart-children.ts

@@ -1,11 +1,21 @@
 import { Group } from '@visx/group';
 import { useMemo, Children, isValidElement } from 'react';
-import type { ReactNode } from 'react';
+import { Legend } from '../../../components/legend';
+import type { LegendPosition } from '../../../types';
+import type { ReactElement, ReactNode } from 'react';
+
+export type LegendChild = {
+	element: ReactElement;
+	position: LegendPosition;
+};
 
 interface ChartChildren {
 	svgChildren: ReactNode[];
 	htmlChildren: ReactNode[];
+	legendChildren: LegendChild[];
 	otherChildren: ReactNode[];
+	/** All children except Legend, in original order. */
+	nonLegendChildren: ReactNode[];
 }
 
 /**
@@ -21,10 +31,23 @@ export function useChartChildren( children: ReactNode, chartType: string ): Char
 	return useMemo( () => {
 		const svg: ReactNode[] = [];
 		const html: ReactNode[] = [];
+		const legend: LegendChild[] = [];
 		const other: ReactNode[] = [];
+		const nonLegend: ReactNode[] = [];
 
 		Children.forEach( children, child => {
 			if ( isValidElement( child ) ) {
+				// Extract Legend children for position-based slot rendering
+				if ( child.type === Legend ) {
+					const rawPosition = child.props?.position;
+					const position =
+						rawPosition === 'top' || rawPosition === 'bottom' ? rawPosition : 'bottom';
+
+					legend.push( { element: child as ReactElement, position } );
+
+					return;
+				}
+
 				// Check displayName for compound components
 				const childType = child.type as { displayName?: string };
 				const displayName = childType?.displayName;
@@ -51,8 +74,17 @@ export function useChartChildren( children: ReactNode, chartType: string ): Char
 					other.push( child );
 				}
 			}
+
+			// Preserve original order of all non-Legend children
+			nonLegend.push( child );
 		} );
 
-		return { svgChildren: svg, htmlChildren: html, otherChildren: other };
+		return {
+			svgChildren: svg,
+			htmlChildren: html,
+			legendChildren: legend,
+			otherChildren: other,
+			nonLegendChildren: nonLegend,
+		};
 	}, [ children, chartType ] );
 }

package/src/charts/private/chart-layout/chart-layout.module.scss

@@ -0,0 +1,7 @@
+// Shared content area for charts using the render prop.
+// Wraps render prop output and handles measurement.
+.chart-layout__content {
+	flex: 1;
+	min-height: 0;
+	min-width: 0;
+}

package/src/charts/private/chart-layout/chart-layout.tsx

@@ -0,0 +1,106 @@
+import { Stack } from '@wordpress/ui';
+import { useEffect } from 'react';
+import { useElementSize } from '../../../hooks';
+import { renderLegendSlot } from '../chart-composition';
+import styles from './chart-layout.module.scss';
+import type { LegendPosition } from '../../../types';
+import type { LegendChild } from '../chart-composition/use-chart-children';
+import type { GapSize } from '@wordpress/theme';
+import type { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Measurements provided to the render prop when ChartLayout handles resize listening.
+ */
+export interface ContentMeasurements {
+	/** Measured width of the content area in pixels */
+	contentWidth: number;
+	/** Measured height of the content area in pixels */
+	contentHeight: number;
+	/** True when a non-zero contentHeight measurement is available */
+	isMeasured: boolean;
+}
+
+export interface ChartLayoutProps {
+	/** Position for the prop-based legend element */
+	legendPosition: LegendPosition;
+	/** The legend element rendered via the showLegend prop (false when hidden) */
+	legendElement?: ReactNode;
+	/** Legend children from the composition API */
+	legendChildren: LegendChild[];
+	/** Chart content — either a ReactNode or a render prop receiving content measurements */
+	children: ReactNode | ( ( measurements: ContentMeasurements ) => ReactNode );
+	/** Content rendered after the bottom legend (e.g., nonLegendChildren, htmlChildren, tooltips) */
+	trailingContent?: ReactNode;
+	/** Called when the measured content height changes (for render-prop mode) */
+	onContentHeightChange?: ( height: number ) => void;
+	/** Gap between Stack items */
+	gap?: GapSize;
+	/** Additional class names */
+	className?: string;
+	/** Inline styles (width, height, etc.) */
+	style?: CSSProperties;
+	/** Test ID for the container */
+	'data-testid'?: string;
+	/** Chart ID attribute */
+	'data-chart-id'?: string;
+}
+
+export const ChartLayout = ( {
+	legendPosition,
+	legendElement,
+	legendChildren,
+	children,
+	trailingContent,
+	onContentHeightChange,
+	gap,
+	className,
+	style,
+	'data-testid': dataTestId,
+	'data-chart-id': dataChartId,
+}: ChartLayoutProps ) => {
+	const [ contentRef, contentWidth, contentHeight ] = useElementSize< HTMLDivElement >();
+	const isRenderProp = typeof children === 'function';
+	const isMeasured = contentHeight > 0;
+
+	// When using render-prop children, hide the layout until measurement is available
+	// to prevent layout shift. Plain ReactNode children don't need this since they
+	// don't depend on measured dimensions.
+	const visibilityStyle: { visibility?: 'hidden' | 'visible' } =
+		isRenderProp && ! isMeasured ? { visibility: 'hidden' } : {};
+
+	useEffect( () => {
+		if ( isRenderProp && onContentHeightChange && isMeasured ) {
+			onContentHeightChange( contentHeight );
+		}
+	}, [ isRenderProp, contentHeight, isMeasured, onContentHeightChange ] );
+	const renderedChildren = isRenderProp
+		? children( { contentWidth, contentHeight, isMeasured } )
+		: children;
+
+	return (
+		<Stack
+			direction="column"
+			gap={ gap }
+			className={ className }
+			style={ { ...style, ...visibilityStyle } }
+			data-testid={ dataTestId }
+			data-chart-id={ dataChartId }
+		>
+			{ legendPosition === 'top' && legendElement }
+			{ renderLegendSlot( legendChildren, 'top' ) }
+
+			{ isRenderProp ? (
+				<div ref={ contentRef } className={ styles[ 'chart-layout__content' ] }>
+					{ renderedChildren }
+				</div>
+			) : (
+				renderedChildren
+			) }
+
+			{ legendPosition === 'bottom' && legendElement }
+			{ renderLegendSlot( legendChildren, 'bottom' ) }
+
+			{ trailingContent }
+		</Stack>
+	);
+};

package/src/charts/private/chart-layout/index.ts

@@ -0,0 +1,2 @@
+export { ChartLayout } from './chart-layout';
+export type { ChartLayoutProps, ContentMeasurements } from './chart-layout';

package/src/charts/private/chart-layout/test/chart-layout.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen } from '@testing-library/react';
+import { renderLegendSlot } from '../../chart-composition';
+import { ChartLayout } from '../chart-layout';
+import type { LegendChild } from '../../chart-composition/use-chart-children';
+
+// Mock renderLegendSlot since we test it separately
+jest.mock( '../../chart-composition', () => ( {
+	renderLegendSlot: jest.fn( () => [] ),
+} ) );
+
+const mockRenderLegendSlot = renderLegendSlot as jest.Mock;
+
+describe( 'ChartLayout', () => {
+	beforeEach( () => {
+		mockRenderLegendSlot.mockReturnValue( [] );
+	} );
+
+	it( 'renders children inside a column Stack', () => {
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		expect( screen.getByTestId( 'chart-content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders legend element at top when legendPosition is top', () => {
+		const legendElement = <div data-testid="legend">Legend</div>;
+		render(
+			<ChartLayout legendPosition="top" legendElement={ legendElement } legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		const legend = screen.getByTestId( 'legend' );
+		const content = screen.getByTestId( 'chart-content' );
+		expect( legend.compareDocumentPosition( content ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
+
+	it( 'renders legend element at bottom when legendPosition is bottom', () => {
+		const legendElement = <div data-testid="legend">Legend</div>;
+		render(
+			<ChartLayout legendPosition="bottom" legendElement={ legendElement } legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		const content = screen.getByTestId( 'chart-content' );
+		const legend = screen.getByTestId( 'legend' );
+		expect( content.compareDocumentPosition( legend ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
+
+	it( 'does not render legend element when it is false/null', () => {
+		render(
+			<ChartLayout legendPosition="top" legendElement={ false } legendChildren={ [] }>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		expect( screen.queryByTestId( 'legend' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'calls renderLegendSlot for both positions', () => {
+		const legendChildren: LegendChild[] = [];
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ legendChildren }>
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		expect( mockRenderLegendSlot ).toHaveBeenCalledWith( legendChildren, 'top' );
+		expect( mockRenderLegendSlot ).toHaveBeenCalledWith( legendChildren, 'bottom' );
+	} );
+
+	it( 'hides layout until measured when using render-prop children', () => {
+		// Override the global getBoundingClientRect mock to return zero (unmeasured state)
+		// for elements inside this test. This simulates the initial state before
+		// ResizeObserver provides real dimensions in a browser.
+		const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+		Element.prototype.getBoundingClientRect = function () {
+			return { width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0 } as DOMRect;
+		};
+
+		try {
+			const childFn = jest.fn().mockReturnValue( <div>Chart</div> );
+			render(
+				<ChartLayout legendPosition="bottom" legendChildren={ [] } data-testid="layout">
+					{ childFn }
+				</ChartLayout>
+			);
+			// When contentHeight is 0, layout should be hidden to prevent layout shift
+			expect( screen.getByTestId( 'layout' ) ).toHaveStyle( { visibility: 'hidden' } );
+		} finally {
+			Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+		}
+	} );
+
+	it( 'does not hide layout when using plain ReactNode children', () => {
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] } data-testid="layout">
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		const layoutStyle = screen.getByTestId( 'layout' ).getAttribute( 'style' ) ?? '';
+		expect( layoutStyle ).not.toContain( 'visibility' );
+	} );
+
+	it( 'passes className and style to Stack', () => {
+		render(
+			<ChartLayout
+				legendPosition="bottom"
+				legendChildren={ [] }
+				className="my-chart"
+				style={ { width: 400, height: 300 } }
+				data-testid="layout"
+			>
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		const layout = screen.getByTestId( 'layout' );
+		expect( layout ).toHaveClass( 'my-chart' );
+		expect( layout ).toHaveStyle( { width: '400px', height: '300px' } );
+	} );
+
+	it( 'passes gap to Stack', () => {
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] } gap="lg" data-testid="layout">
+				<div>Chart</div>
+			</ChartLayout>
+		);
+		// Stack renders gap as a CSS class or style — just verify it renders without error
+		expect( screen.getByTestId( 'layout' ) ).toBeInTheDocument();
+	} );
+
+	it( 'calls function-as-children with measurement props', () => {
+		const childFn = jest.fn().mockReturnValue( <div data-testid="chart-content">Chart</div> );
+
+		render(
+			<ChartLayout legendPosition="bottom" legendChildren={ [] }>
+				{ childFn }
+			</ChartLayout>
+		);
+
+		expect( childFn ).toHaveBeenCalled();
+		const firstCallArg = childFn.mock.calls[ 0 ][ 0 ];
+
+		expect( firstCallArg ).toEqual(
+			expect.objectContaining( {
+				contentWidth: expect.any( Number ),
+				contentHeight: expect.any( Number ),
+				isMeasured: expect.any( Boolean ),
+			} )
+		);
+	} );
+
+	it( 'renders trailing content after bottom legend', () => {
+		render(
+			<ChartLayout
+				legendPosition="bottom"
+				legendElement={ <div data-testid="legend">Legend</div> }
+				legendChildren={ [] }
+				trailingContent={ <div data-testid="trailing">Extra</div> }
+			>
+				<div data-testid="chart-content">Chart</div>
+			</ChartLayout>
+		);
+		const legend = screen.getByTestId( 'legend' );
+		const trailing = screen.getByTestId( 'trailing' );
+		expect( legend.compareDocumentPosition( trailing ) ).toBe( Node.DOCUMENT_POSITION_FOLLOWING );
+	} );
+} );

package/src/charts/private/single-chart-context/single-chart-context.tsx

@@ -13,8 +13,8 @@ export interface ChartInstanceRef {
 export interface ChartInstanceContextValue {
 	chartId: string;
 	chartRef?: React.RefObject< ChartInstanceRef >;
-	chartWidth: number;
-	chartHeight: number;
+	chartWidth?: number;
+	chartHeight?: number;
 }
 
 export const ChartInstanceContext = createContext< ChartInstanceContextValue | null >( null );

package/src/charts/private/svg-empty-state/index.ts

@@ -0,0 +1 @@
+export { SvgEmptyState } from './svg-empty-state';

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -0,0 +1,7 @@
+.svg-empty-state {
+	text-align: center;
+	width: 100%;
+	height: 100%;
+	font-size: var(--wpds-font-size-md, 13px);
+	color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
+}

package/src/charts/private/svg-empty-state/svg-empty-state.tsx

@@ -0,0 +1,40 @@
+import { Stack } from '@wordpress/ui';
+import styles from './svg-empty-state.module.scss';
+import type { FC, ReactNode } from 'react';
+
+interface SvgEmptyStateProps {
+	/** X coordinate of the center point */
+	x: number;
+	/** Y coordinate of the center point */
+	y: number;
+	/** Available width for the text area */
+	width: number;
+	/** Available height for the text area */
+	height: number;
+	/** Text content */
+	children: ReactNode;
+}
+
+/**
+ * Renders empty-state text inside an SVG using foreignObject so that the
+ * message wraps onto multiple lines instead of being clipped.
+ *
+ * The component centers the text within the specified area.
+ *
+ * @param  root0          - Component props
+ * @param  root0.x        - X coordinate of the center point
+ * @param  root0.y        - Y coordinate of the center point
+ * @param  root0.width    - Available width for the text area
+ * @param  root0.height   - Available height for the text area
+ * @param  root0.children - Text content
+ * @return {JSX.Element} A foreignObject element containing the centered text.
+ */
+export const SvgEmptyState: FC< SvgEmptyStateProps > = ( { x, y, width, height, children } ) => {
+	return (
+		<foreignObject x={ x - width / 2 } y={ y - height / 2 } width={ width } height={ height }>
+			<Stack align="center" justify="center" className={ styles[ 'svg-empty-state' ] }>
+				{ children }
+			</Stack>
+		</foreignObject>
+	);
+};