@automattic/charts 0.57.0 → 0.58.0

package/src/components/legend/types.ts

@@ -1,4 +1,10 @@
 import { LegendOrdinal } from '@visx/legend';
+import type {
+	LegendItemStyles,
+	LegendLabelStyles,
+	LegendPosition,
+	LegendShapeStyles,
+} from '../../types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 
@@ -7,43 +13,10 @@ type VisxLegendProps = Pick<
 	'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'
 >;
 
-export type LegendItemStyles = {
-	/** Margin around each legend item. */
-	margin?: CSSProperties[ 'margin' ];
-	/** Flex direction for items within each legend entry. */
-	flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
-};
-
-export type LegendLabelStyles = Pick< CSSProperties, 'justifyContent' | 'flex' | 'margin' > & {
-	/**
-	 * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
-	 * When set, text overflow behavior is controlled by textOverflow.
-	 */
-	maxWidth?: string;
-	/**
-	 * Controls how text behaves when it exceeds maxWidth.
-	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-	 */
-	textOverflow?: 'ellipsis' | 'wrap';
-};
-
-export type LegendShapeStyles = {
-	/** Width of the legend shape in pixels. */
-	width?: number;
-	/** Height of the legend shape in pixels. */
-	height?: number;
-	/** Margin around the legend shape. */
-	margin?: CSSProperties[ 'margin' ];
-};
-
 export type BaseLegendProps = VisxLegendProps & {
 	items: BaseLegendItem[];
 	orientation?: 'horizontal' | 'vertical';
-	/**
-	 * TODO: Add 'left' | 'right' positioning support in future implementation
-	 */
-	position?: 'top' | 'bottom';
+	position?: LegendPosition;
 	alignment?: 'start' | 'center' | 'end';
 	/** Additional CSS class name for legend items. */
 	itemClassName?: string;

package/src/hooks/index.ts

@@ -4,7 +4,6 @@ export { useXYChartTheme } from './use-xychart-theme';
 export { useChartDataTransform } from './use-chart-data-transform';
 export { useChartMargin } from './use-chart-margin';
 export { useElementSize } from './use-element-size';
-export { useHasLegendChild } from './use-has-legend-child';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';
 export { useInteractiveLegendData } from './use-interactive-legend-data';

package/src/index.ts

@@ -37,13 +37,7 @@ export type {
 	PieSemiCircleChartRenderTooltipParams,
 } from './charts/pie-semi-circle-chart';
 export type { GeoChartProps, GeoRegion, GeoResolution } from './charts/geo-chart';
-export type {
-	LegendValueDisplay,
-	BaseLegendItem,
-	LegendItemStyles,
-	LegendLabelStyles,
-	LegendShapeStyles,
-} from './components/legend';
+export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';
 export type {

package/src/types.ts

@@ -352,6 +352,86 @@ export type ScaleOptions = {
 	paddingOuter?: number;
 };
 
+export type LegendItemStyles = {
+	/** Margin around each legend item. */
+	margin?: CSSProperties[ 'margin' ];
+	/** Flex direction for items within each legend entry. */
+	flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+
+export type LegendLabelStyles = Pick< CSSProperties, 'justifyContent' | 'flex' | 'margin' > & {
+	/**
+	 * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+	 * When set, text overflow behavior is controlled by textOverflow.
+	 */
+	maxWidth?: string;
+	/**
+	 * Controls how text behaves when it exceeds maxWidth.
+	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+	 */
+	textOverflow?: 'ellipsis' | 'wrap';
+};
+
+export type LegendShapeStyles = {
+	/** Width of the legend shape in pixels. */
+	width?: number;
+	/** Height of the legend shape in pixels. */
+	height?: number;
+	/** Margin around the legend shape. */
+	margin?: CSSProperties[ 'margin' ];
+};
+
+/** Position of the legend relative to chart content. */
+export type LegendPosition = 'top' | 'bottom';
+
+/**
+ * Configuration object for chart legend appearance and behavior.
+ * Consolidates all legend styling and layout props into a single structured object.
+ */
+export type ChartLegendConfig< T = DataPoint | DataPointDate | LeaderboardEntry > = {
+	/**
+	 * Layout direction of legend items.
+	 */
+	orientation?: 'horizontal' | 'vertical';
+	/**
+	 * Position of the legend relative to the chart.
+	 * TODO: Add 'left' | 'right' positioning support in future implementation
+	 */
+	position?: LegendPosition;
+	/**
+	 * Alignment of the legend within its position.
+	 */
+	alignment?: 'start' | 'center' | 'end';
+	/**
+	 * Shape of the legend marker icon.
+	 */
+	shape?: LegendShape< T, number >;
+	/**
+	 * Enable interactive legend items that can toggle series visibility.
+	 * Supported for all chart types that render series.
+	 * Requires chartId and GlobalChartsProvider.
+	 * For pie charts, percentages are recalculated so visible segments total 100%.
+	 */
+	interactive?: boolean;
+	/**
+	 * Additional CSS class name for individual legend items.
+	 */
+	itemClassName?: string;
+	/**
+	 * CSS styles for each legend item (margin, flexDirection).
+	 */
+	itemStyles?: LegendItemStyles;
+	/**
+	 * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
+	 */
+	labelStyles?: LegendLabelStyles;
+	/**
+	 * Styles for legend shapes (width, height, margin).
+	 */
+	shapeStyles?: LegendShapeStyles;
+};
+
 /**
  * Base properties shared across all chart components
  */
@@ -416,45 +496,10 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	 */
 	showLegend?: boolean;
 	/**
-	 * Legend orientation
-	 */
-	legendOrientation?: 'horizontal' | 'vertical';
-	/**
-	 * Legend shape
-	 */
-	legendShape?: LegendShape< T, number >;
-	/**
-	 * Legend position (where the legend appears)
-	 * TODO: Add 'left' | 'right' positioning support in future implementation
-	 */
-	legendPosition?: 'top' | 'bottom';
-	/**
-	 * Legend alignment within its position
-	 */
-	legendAlignment?: 'start' | 'center' | 'end';
-	/**
-	 * Maximum width for legend items. When set, text overflow behavior is controlled by legendTextOverflow.
-	 * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-	 */
-	legendMaxWidth?: string;
-	/**
-	 * Controls how text behaves when it exceeds legendMaxWidth.
-	 * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-	 * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-	 */
-	legendTextOverflow?: 'ellipsis' | 'wrap';
-	/**
-	 * Additional CSS class name for legend items.
-	 * This allows consumers to customize individual legend item styling.
-	 */
-	legendItemClassName?: string;
-	/**
-	 * Enable interactive legend items that can toggle series visibility.
-	 * Supported for all chart types that render series.
-	 * Requires chartId and GlobalChartsProvider.
-	 * For pie charts, percentages are recalculated so visible segments total 100%.
+	 * Legend configuration object for controlling legend appearance and behavior.
+	 * Includes orientation, position, alignment, shape, styling, and interactivity options.
 	 */
-	legendInteractive?: boolean;
+	legend?: ChartLegendConfig< T >;
 	/**
 	 * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
 	 */

package/src/utils/date-parsing.ts

@@ -44,7 +44,16 @@ import { parse, parseISO, isValid } from 'date-fns';
  * @return {boolean} True if the date string contains timezone information, false otherwise
  */
 const hasTimezone = ( dateString: string ): boolean => {
-	return /T.*[Z]$|T.*[+-]\d{2}:?\d{2}$/.test( dateString );
+	const tIndex = dateString.indexOf( 'T' );
+	if ( tIndex === -1 ) {
+		return false;
+	}
+
+	if ( dateString.endsWith( 'Z' ) ) {
+		return true;
+	}
+
+	return /[+-]\d{2}:?\d{2}$/.test( dateString.slice( tIndex + 1 ) );
 };
 
 /**

package/src/utils/test/date-parsing.test.ts

@@ -268,6 +268,18 @@ describe( 'parseAsLocalDate', () => {
 		} );
 	} );
 
+	describe( 'ReDoS resilience', () => {
+		test( 'should handle adversarial input without catastrophic backtracking', () => {
+			const malicious = 'T' + 'a'.repeat( 8000000 ) + 'X';
+			const start = performance.now();
+			const result = parseAsLocalDate( malicious );
+			const elapsed = performance.now() - start;
+
+			expect( isNaN( result.getTime() ) ).toBe( true );
+			expect( elapsed ).toBeLessThan( 50 );
+		} );
+	} );
+
 	describe( 'Performance and consistency', () => {
 		test( 'should consistently parse the same input', () => {
 			const dateString = '2025-01-15T14:30:45Z';

package/src/utils/test/resolve-css-var.test.ts

@@ -414,7 +414,7 @@ describe( 'resolveCssVariable', () => {
 				if ( element === themedElement ) {
 					return {
 						getPropertyValue: ( prop: string ) => {
-							if ( prop === '--wpds-color-bg-interactive-brand' ) {
+							if ( prop === '--wpds-color-bg-interactive-brand-weak' ) {
 								return '#c029dc'; // User's custom accent color
 							}
 							return '';
@@ -427,7 +427,7 @@ describe( 'resolveCssVariable', () => {
 			} );
 			window.getComputedStyle = mockGetComputedStyle as unknown as typeof window.getComputedStyle;
 
-			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand', themedElement );
+			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand-weak', themedElement );
 			expect( result ).toBe( '#c029dc' );
 		} );
 	} );

package/tsup.config.ts

@@ -16,7 +16,7 @@ export default defineConfig( {
 	dts: true,
 	format: [ 'esm', 'cjs' ],
 	outDir: 'dist',
-	noExternal: [ '@wordpress/ui' ],
+	noExternal: [ '@wordpress/ui', 'fast-deep-equal' ],
 	loader: {
 		'.jpg': 'file',
 		'.gif': 'file',