@automattic/charts 2.0.1 → 3.1.0

package/src/providers/chart-scope/test/chart-scope.test.tsx

@@ -0,0 +1,24 @@
+import { renderHook } from '@testing-library/react';
+import { ChartScopeContext, useChartScopeElement } from '../index';
+import type { ReactNode } from 'react';
+
+describe( 'useChartScopeElement', () => {
+	// The default has to stay null rather than `document.documentElement`: a chart with no scope above it must resolve nothing and fall back to its theme literal, not silently read the document root again.
+	it( 'returns null with no scope above it', () => {
+		const { result } = renderHook( () => useChartScopeElement() );
+
+		expect( result.current ).toBeNull();
+	} );
+
+	it( 'returns the enclosing scope element', () => {
+		const scope = document.createElement( 'div' );
+
+		const { result } = renderHook( () => useChartScopeElement(), {
+			wrapper: ( { children }: { children: ReactNode } ) => (
+				<ChartScopeContext.Provider value={ scope }>{ children }</ChartScopeContext.Provider>
+			),
+		} );
+
+		expect( result.current ).toBe( scope );
+	} );
+} );

package/src/providers/chart-scope/test/use-standalone-scope-class.test.tsx

@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react';
+import { CHART_SCOPE_CLASS } from '../../../styles/chart-scope-class';
+import { GlobalChartsProvider } from '../../chart-context/global-charts-provider';
+import { useStandaloneScopeClass } from '../use-standalone-scope-class';
+
+describe( 'useStandaloneScopeClass', () => {
+	it( 'returns the scope class with no provider above it', () => {
+		const { result } = renderHook( () => useStandaloneScopeClass() );
+
+		expect( result.current ).toBe( CHART_SCOPE_CLASS );
+	} );
+
+	it( 'returns undefined inside a GlobalChartsProvider', () => {
+		const { result } = renderHook( () => useStandaloneScopeClass(), {
+			wrapper: ( { children } ) => <GlobalChartsProvider>{ children }</GlobalChartsProvider>,
+		} );
+
+		expect( result.current ).toBeUndefined();
+	} );
+} );

package/src/providers/chart-scope/use-chart-scope-element.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ChartScopeContext } from './chart-scope-context';
+
+/**
+ * Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
+ *
+ * @return {HTMLElement | null} The nearest chart scope element, or `null`.
+ */
+export const useChartScopeElement = (): HTMLElement | null => useContext( ChartScopeContext );

package/src/providers/chart-scope/use-standalone-scope-class.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { GlobalChartsContext } from '../chart-context/global-charts-provider';
+
+/**
+ * Returns the catalog class when there is no `GlobalChartsProvider` above this component, and `undefined` when there is.
+ *
+ * Standalone components need the catalog to resolve at all, but inside a provider the tokens already inherit — re-declaring them there would shadow a consumer override set anywhere in the tree.
+ *
+ * @return The scope class name, or undefined when a provider is present.
+ */
+export const useStandaloneScopeClass = (): string | undefined =>
+	useContext( GlobalChartsContext ) ? undefined : CHART_SCOPE_CLASS;

package/src/providers/index.ts

@@ -1 +1,2 @@
 export * from './chart-context';
+export * from './chart-scope';

package/src/styles/chart-scope-class.ts

@@ -0,0 +1,6 @@
+/**
+ * Stable class that carries the `--a8c-charts-*` catalog. Applied to the `GlobalChartsProvider` wrapper, to portal-rendered surfaces (which sit outside the provider tree), and to standalone components when no provider is above them.
+ *
+ * Deliberately unhashed: consumers are documented as being able to target it to override a token on the provider element.
+ */
+export const CHART_SCOPE_CLASS = 'a8c-charts-scope';

package/src/styles/chart-scope.scss

@@ -0,0 +1,83 @@
+// The single mapping point between the --a8c-charts-* catalog and WordPress
+// design-system tokens.
+
+// Declared on the GlobalChartsProvider wrapper — not at :root — because
+// @wordpress/theme's ThemeProvider emits its generated --wpds-* ramp as inline
+// styles on its own wrapper div, not on the document root. Substituting at the
+// provider means a ThemeProvider above it is picked up; substituting at :root
+// would miss it entirely.
+
+// :where() keeps the rule at zero specificity so any consumer rule
+// targeting the same element wins. Chart roots deliberately do NOT
+// re-declare these: an element's own declaration beats an inherited one,
+// so re-declaring lower down would shadow a consumer override set inside
+// the provider tree.
+
+// The five roles a `theme` prop field can override read a `*-theme` variable
+// first, which GlobalChartsProvider writes inline from that field. Publishing
+// the consumer's value one layer out, rather than as the role itself, is what
+// keeps the catalog default reachable: a value that is invalid at
+// computed-value time (a fallback-less `var()` naming a token nothing set,
+// which is how premium-analytics passes its grid stroke) invalidates only the
+// `*-theme` variable, and the role's own fallback still resolves the mapped
+// --wpds-* token. Written as the role directly, that same value made the role
+// guaranteed-invalid and took every bare `var(--a8c-charts-color-grid)` read
+// site with it — gridlines painted `unset` instead of the spec grey.
+// `src/styles/test/chart-scope.test.ts` pins which roles carry the layer.
+
+// Declares custom properties only. This stylesheet must never change layout.
+:where(.a8c-charts-scope) {
+	--a8c-charts-color-grid: var(--a8c-charts-color-grid-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
+	--a8c-charts-color-axis: var(--a8c-charts-color-axis-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
+	--a8c-charts-color-tick: var(--a8c-charts-color-tick-theme, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
+	--a8c-charts-color-label: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	--a8c-charts-color-label-secondary: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	--a8c-charts-color-label-inverse: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
+	// White label text sits on arbitrary series colours, so it has no WPDS
+	// content-foreground equivalent.
+	--a8c-charts-color-label-on-fill: #fff;
+	// The SVG axis and tick labels. `svgLabelSmall.fill` publishes THIS role, so
+	// deriving from --a8c-charts-color-label is safe and wanted: the theme field
+	// moves only these labels, while setting the broad role in CSS still moves
+	// every label at once. (--a8c-charts-color-surface cannot derive the same
+	// way — see its comment; there the theme field owns the broad role.)
+	--a8c-charts-color-label-axis: var(--a8c-charts-color-label-axis-theme, var(--a8c-charts-color-label));
+	--a8c-charts-color-annotation: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	--a8c-charts-color-trend-up: var(--wpds-color-foreground-content-success-weak, #008030);
+	--a8c-charts-color-trend-down: var(--wpds-color-foreground-content-error-weak, #cc1818);
+	--a8c-charts-color-trend-neutral: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	--a8c-charts-color-background: var(--a8c-charts-color-background-theme, var(--wpds-color-background-surface-neutral-strong, #fff));
+	// Surfaces that float over the chart — tooltips, the annotation label, the
+	// zoom-reset control. Same WPDS token as --a8c-charts-color-background, and
+	// deliberately NOT derived from it: `backgroundColor` publishes the
+	// background role, so deriving would let that theme field repaint these too.
+	// Sibling of the background role, not a child of it.
+	--a8c-charts-color-surface: var(--wpds-color-background-surface-neutral-strong, #fff);
+	--a8c-charts-color-surface-secondary: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
+	--a8c-charts-color-track: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
+	// Translucent dark surface; no WPDS token carries this.
+	--a8c-charts-color-tooltip-surface: rgb(0 0 0 / 85%);
+	--a8c-charts-color-zoom-selection: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
+	--a8c-charts-color-zoom-selection-stroke: var(--wpds-color-stroke-interactive-brand, var(--wp-admin-theme-color, #3858e9));
+
+	// @wordpress/theme 1.0.0 removed the whole --wpds-elevation-* group while the
+	// elevation model is redefined (gutenberg#80099). These carry the removed spec
+	// values literally until a replacement token exists.
+	--a8c-charts-elevation-xs:
+		0 1px 1px 0 #00000008,
+		0 1px 2px 0 #00000005,
+		0 3px 3px 0 #00000005,
+		0 4px 4px 0 #00000003;
+	--a8c-charts-elevation-sm:
+		0 1px 2px 0 #0000000d,
+		0 2px 3px 0 #0000000a,
+		0 6px 6px 0 #00000008,
+		0 8px 8px 0 #00000005;
+
+	--a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl, 400ms);
+	--a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
+	--a8c-charts-border-radius-bar: var(--wpds-border-radius-md, 4px);
+	--a8c-charts-border-radius-cell: var(--wpds-border-radius-sm, 2px);
+	// Pill shape; no WPDS radius reaches it.
+	--a8c-charts-border-radius-leaderboard-bar: 9999px;
+}

package/src/styles/test/chart-scope.test.ts

@@ -0,0 +1,165 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import {
+	THEME_LAYERED_ROLES,
+	themeLayerVar,
+} from '../../providers/chart-context/private/theme-override-vars';
+
+const stylesheet = readFileSync( join( __dirname, '..', 'chart-scope.scss' ), 'utf8' );
+const tokensDoc = readFileSync( join( __dirname, '..', '..', '..', 'TOKENS.md' ), 'utf8' );
+
+type Entry = {
+	/** The custom property this one reads, or null when the value is a literal. */
+	reads: string | null;
+	/** The `var()` fallback, or the whole value when it reads nothing. */
+	fallback: string | null;
+};
+
+const normalize = ( value: string ): string => value.replace( /\s+/g, ' ' ).trim();
+
+/**
+ * Unwraps the theme layer a `theme`-prop-overridable role carries, so the tables in `TOKENS.md` keep documenting what a role ultimately resolves to — its `--wpds-*` token and spec fallback — rather than restating the override plumbing in every row. Which roles carry the layer is pinned separately below.
+ *
+ * @param name  - The declared property name.
+ * @param value - Its normalized value.
+ * @return The value with a leading `var(<name>-theme, … )` wrapper removed.
+ */
+function stripThemeLayer( name: string, value: string ): string {
+	const layered = new RegExp( `^var\\(\\s*${ themeLayerVar( name ) }\\s*,\\s*(.*)\\)$`, 's' ).exec(
+		value
+	);
+
+	return layered ? layered[ 1 ].trim() : value;
+}
+
+/**
+ * Parses each catalog declaration in the stylesheet into the property it reads and the fallback it carries. Splitting the `var()` arguments at the *first* comma keeps a fallback that is itself a function call intact — `cubic-bezier(0.25, 0, 0, 1)` would otherwise be truncated at its first argument.
+ *
+ * @return Every declared `--a8c-charts-*` property, keyed by name.
+ */
+function parseStylesheet(): Map< string, Entry > {
+	const body = stylesheet.slice( stylesheet.indexOf( '{' ) + 1, stylesheet.lastIndexOf( '}' ) );
+	const entries = new Map< string, Entry >();
+
+	for ( const declaration of body
+		.split( '\n' )
+		.map( line => line.trim() )
+		.filter( line => line && ! line.startsWith( '//' ) )
+		.join( '\n' )
+		.split( ';' ) ) {
+		const separator = declaration.indexOf( ':' );
+
+		if ( separator === -1 ) {
+			continue;
+		}
+
+		const name = declaration.slice( 0, separator ).trim();
+		const value = stripThemeLayer( name, normalize( declaration.slice( separator + 1 ) ) );
+		const wrapped = /^var\(\s*(.*)\)$/s.exec( value );
+
+		if ( ! wrapped ) {
+			entries.set( name, { reads: null, fallback: value } );
+			continue;
+		}
+
+		const args = wrapped[ 1 ];
+		const comma = args.indexOf( ',' );
+
+		entries.set(
+			name,
+			comma === -1
+				? { reads: args.trim(), fallback: null }
+				: { reads: args.slice( 0, comma ).trim(), fallback: normalize( args.slice( comma + 1 ) ) }
+		);
+	}
+
+	return entries;
+}
+
+/**
+ * Parses the catalog tables in `TOKENS.md` — the ones whose header is `Role | Maps to …` — into the same shape as the stylesheet, so the two can be compared directly. Other tables in the document (theme-field mappings, deprecated aliases) are skipped.
+ *
+ * @return Every documented role, keyed by name.
+ */
+function parseTokensDoc(): Map< string, Entry > {
+	const entries = new Map< string, Entry >();
+	const lines = tokensDoc.split( '\n' );
+	let inCatalogTable = false;
+
+	for ( const line of lines ) {
+		if ( ! line.trim().startsWith( '|' ) ) {
+			inCatalogTable = false;
+			continue;
+		}
+
+		const cells = line
+			.split( '|' )
+			.slice( 1, -1 )
+			.map( cell => cell.trim() );
+
+		if ( cells[ 0 ] === 'Role' ) {
+			inCatalogTable = cells[ 1 ]?.startsWith( 'Maps to' ) ?? false;
+			continue;
+		}
+
+		if ( ! inCatalogTable || cells.length !== 3 || /^-+$/.test( cells[ 0 ] ) ) {
+			continue;
+		}
+
+		const [ role, mapping, fallback ] = cells.map( cell => cell.replace( /`/g, '' ) );
+		// A "none" cell explains *why* there is no mapping, and that explanation can
+		// name a `--wpds-*` token itself (the removed elevation group). Read it as
+		// "no mapping" before looking for a token name inside it.
+		const unmapped = mapping.startsWith( '_(none' );
+		const derives = /derives from (--[\w-]+)/.exec( mapping );
+		const wpds = /(--wpds-[\w-]+)/.exec( mapping );
+
+		entries.set( role, {
+			reads: unmapped ? null : derives?.[ 1 ] ?? wpds?.[ 1 ] ?? null,
+			fallback: fallback === '—' ? null : normalize( fallback ),
+		} );
+	}
+
+	return entries;
+}
+
+const declared = parseStylesheet();
+const documented = parseTokensDoc();
+
+describe( 'chart scope catalog', () => {
+	it( 'documents every declared role, and declares every documented one', () => {
+		expect( [ ...documented.keys() ].sort() ).toEqual( [ ...declared.keys() ].sort() );
+	} );
+
+	// The tables in TOKENS.md restate the stylesheet for consumers who only have the
+	// published package. This is the check that stops the two drifting apart.
+	it.each( [ ...declared.keys() ] )( 'documents %s with the value it is declared with', token => {
+		expect( documented.get( token ) ).toEqual( declared.get( token ) );
+	} );
+
+	// The layer is what keeps a `theme` prop override from being able to take its role down with it: an override that is invalid at computed-value time only invalidates `<role>-theme`, and the role's own fallback still resolves the mapped token. Drop the layer from a role and that role's overrides go back to blanking every read site.
+	it.each( THEME_LAYERED_ROLES )( 'declares %s reading its theme layer first', role => {
+		expect( stylesheet ).toMatch(
+			new RegExp( `${ role }:\\s*var\\(\\s*${ themeLayerVar( role ) }\\s*,` )
+		);
+	} );
+
+	it( 'gives a theme layer to the overridable roles and to nothing else', () => {
+		const layered = [ ...declared.keys() ].filter( role =>
+			new RegExp( `${ role }:\\s*var\\(\\s*${ themeLayerVar( role ) }\\s*,` ).test( stylesheet )
+		);
+
+		expect( layered.sort() ).toEqual( [ ...THEME_LAYERED_ROLES ].sort() );
+	} );
+
+	it( 'scopes the catalog to :where(.a8c-charts-scope) rather than :root', () => {
+		expect( stylesheet ).toMatch( /:where\(\.a8c-charts-scope\)\s*{/ );
+		expect( stylesheet ).not.toMatch( /(^|\s):root\s*{/ );
+	} );
+
+	it( 'declares custom properties only, so this stylesheet cannot change layout', () => {
+		expect( [ ...declared.keys() ].every( name => name.startsWith( '--a8c-charts-' ) ) ).toBe(
+			true
+		);
+	} );
+} );

package/src/styles/test/wpds-fallbacks.test.ts

@@ -0,0 +1,131 @@
+import { globSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import dsTokenFallbacks from '@wordpress/theme/postcss-plugins/postcss-ds-token-fallbacks';
+
+const SOURCE = join( __dirname, '..', '..' );
+
+// @wordpress/theme publishes its token map only through this plugin. The `Declaration`
+// visitor rewrites a declaration's `value` in place and reads nothing else off the node,
+// so a synthetic node is enough to ask it what a token is worth. It throws on a token the
+// installed design system does not define, which is how a rename surfaces here.
+const { Declaration: rewriteValue } = dsTokenFallbacks() as {
+	Declaration: ( declaration: { value: string } ) => void;
+};
+
+const normalize = ( value: string ): string => value.replace( /\s+/g, ' ' ).trim();
+
+/**
+ * Reports the fallback expression the installed design system defines for a token.
+ *
+ * @param token - A `--wpds-*` custom property name.
+ * @return The design system's value for it.
+ */
+function specFallback( token: string ): string {
+	const declaration = { value: `var(${ token })` };
+	rewriteValue( declaration );
+
+	// The plugin is expected to throw on a token the design system does not define. Should a
+	// future version return the reference untouched instead, slicing off a prefix that isn't
+	// there would yield a fragment of the token name and fail some later assertion with a
+	// value nothing wrote. Fail here, naming the token, rather than there.
+	const prefix = `var(${ token }, `;
+
+	if ( ! declaration.value.startsWith( prefix ) || ! declaration.value.endsWith( ')' ) ) {
+		throw new Error(
+			`@wordpress/theme did not supply a fallback for ${ token } — got "${ declaration.value }".`
+		);
+	}
+
+	return declaration.value.slice( prefix.length, -1 );
+}
+
+type Reference = {
+	file: string;
+	token: string;
+	/** The written fallback, or null where the reference is bare. */
+	fallback: string | null;
+};
+
+/**
+ * Finds every `--wpds-*` reference in a file. Scanning for the closing parenthesis by depth, rather than matching a regex, keeps a fallback that is itself a function call or a nested `var()` intact — `cubic-bezier(0.15, 0, 0.15, 1)` and `var(--wp-admin-theme-color, #3858e9)` both end at a parenthesis an inner call opened.
+ *
+ * @param source - The file's contents.
+ * @param file   - Its path, relative to `src`.
+ * @return Every reference the file makes.
+ */
+function referencesIn( source: string, file: string ): Reference[] {
+	const opener = /var\(\s*(--wpds-[\w-]+)\s*/g;
+	const references: Reference[] = [];
+	let match;
+
+	while ( ( match = opener.exec( source ) ) !== null ) {
+		const token = match[ 1 ];
+
+		if ( source[ opener.lastIndex ] !== ',' ) {
+			references.push( { file, token, fallback: null } );
+			continue;
+		}
+
+		let index = opener.lastIndex + 1;
+		let depth = 1;
+
+		while ( index < source.length && depth > 0 ) {
+			if ( source[ index ] === '(' ) {
+				depth++;
+			} else if ( source[ index ] === ')' ) {
+				depth--;
+			}
+
+			if ( depth > 0 ) {
+				index++;
+			}
+		}
+
+		references.push( {
+			file,
+			token,
+			fallback: normalize( source.slice( opener.lastIndex + 1, index ) ),
+		} );
+	}
+
+	return references;
+}
+
+const references = globSync( '**/*.{scss,css,ts,tsx,mdx}', { cwd: SOURCE } )
+	// Paths are relative to `src`, so a top-level `src/test/` arrives without a leading slash.
+	.filter( file => ! /(^|\/)test\//.test( file ) )
+	.flatMap( file => referencesIn( readFileSync( join( SOURCE, file ), 'utf8' ), file ) );
+
+describe( 'design token references', () => {
+	it( 'finds the references, so a broken scan cannot pass as a clean one', () => {
+		expect( references.length ).toBeGreaterThan( 30 );
+	} );
+
+	// Every fallback here is hand-written, because both of this package's consumption paths
+	// have to carry it: `@wordpress/build` apps read `dist/`, while webpack apps resolve the
+	// SCSS through the `jetpack:src` export condition and compile it themselves. Neither
+	// build injects fallbacks, so a bare reference in a stylesheet renders as nothing at all
+	// in a host that has not loaded the design-system stylesheet — and WordPress ships none.
+	//
+	// A bare reference in TS can be deliberate: `stories/theme-config.tsx` seeds a series
+	// colour from a token `ThemeProvider` generates, where resolving to nothing is the
+	// wanted behaviour when no provider is above the chart.
+	it( 'writes a fallback for every token a stylesheet reads', () => {
+		expect(
+			references.filter(
+				reference => reference.fallback === null && /\.(scss|css)$/.test( reference.file )
+			)
+		).toEqual( [] );
+	} );
+
+	// This is the check that keeps a hand-written value honest. It is what `499` — a font
+	// weight that was spec once and drifted — needed and did not have.
+	it( 'writes the design system value as that fallback', () => {
+		const drifted = references
+			.filter( reference => reference.fallback !== null )
+			.map( reference => ( { ...reference, spec: normalize( specFallback( reference.token ) ) } ) )
+			.filter( reference => reference.fallback !== reference.spec );
+
+		expect( drifted ).toEqual( [] );
+	} );
+} );

package/src/types.ts

@@ -639,6 +639,18 @@ export type SeriesChartLegendConfig = ChartLegendConfig< SeriesData[] > & {
 	collapseGroups?: boolean;
 };
 
+/**
+ * Initial visibility options for charts built from labelled series.
+ */
+export interface SeriesVisibilityProps {
+	/**
+	 * Series labels to hide from the first defined value. User changes persist until
+	 * the chart remounts or its ID changes; later values for the same ID are ignored.
+	 * Omit to retain the provider's existing visibility for the chart ID.
+	 */
+	defaultHiddenSeries?: readonly string[];
+}
+
 /**
  * Base properties shared across all chart components
  */
@@ -736,40 +748,6 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	};
 };
 
-/**
- * Properties for grid components
- */
-export type GridProps = {
-	/**
-	 * Width of the grid in pixels
-	 */
-	width: number;
-	/**
-	 * Height of the grid in pixels
-	 */
-	height: number;
-	/**
-	 * Grid visibility. x is default.
-	 */
-	gridVisibility?: 'x' | 'y' | 'xy' | 'none';
-	/**
-	 * X-axis scale for the grid
-	 * TODO: Fix any type after resolving visx scale type issues
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	xScale: any;
-	/**
-	 * Y-axis scale for the grid
-	 * TODO: Fix any type after resolving visx scale type issues
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	yScale: any;
-	/**
-	 * Top offset for the grid
-	 */
-	top?: number;
-};
-
 /**
  * Local type definitions for Popover API attributes and events
  * These are used to avoid extending React module types while still getting type safety

package/src/charts/private/grid-control/grid-control.module.scss

@@ -1,8 +0,0 @@
-.grid-control {
-
-	:global(.visx-line) {
-		stroke: var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
-		stroke-width: 1px;
-		shape-rendering: crispEdges;
-	}
-}

package/src/charts/private/grid-control/grid-control.tsx

@@ -1,26 +0,0 @@
-import { GridRows, GridColumns } from '@visx/grid';
-import styles from './grid-control.module.scss';
-import type { GridProps } from '../../../types';
-import type { FC } from 'react';
-
-const GridControl: FC< GridProps > = ( {
-	width,
-	height,
-	xScale,
-	yScale,
-	gridVisibility = 'x',
-	top = 0,
-} ) => {
-	return (
-		<g transform={ `translate(0, ${ top })` } className={ styles[ 'grid-control' ] }>
-			{ gridVisibility.includes( 'x' ) && (
-				<GridRows scale={ xScale } width={ width } data-testid="x-grid" />
-			) }
-			{ gridVisibility.includes( 'y' ) && (
-				<GridColumns scale={ yScale } height={ height } data-testid="y-grid" />
-			) }
-		</g>
-	);
-};
-
-export default GridControl;

package/src/charts/private/grid-control/index.ts

@@ -1 +0,0 @@
-export { default as GridControl } from './grid-control';

package/src/charts/private/grid-control/test/grid-control.test.tsx

@@ -1,56 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { scaleBand, scaleLinear } from '@visx/scale';
-import GridControl from '../grid-control';
-
-describe( 'GridControl', () => {
-	const defaultProps = {
-		width: 200,
-		height: 200,
-		xScale: scaleBand( { domain: [ 'A', 'B', 'C' ], range: [ 0, 100 ] } ),
-		yScale: scaleLinear( { domain: [ 0, 100 ], range: [ 100, 0 ] } ),
-	};
-
-	test( 'renders x-axis grid lines', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="x" />
-			</svg>
-		);
-		const xGridLines = screen.getAllByTestId( 'x-grid' );
-		expect( xGridLines.length ).toBeGreaterThan( 0 );
-		expect( screen.queryAllByTestId( 'y-grid' ) ).toHaveLength( 0 );
-	} );
-
-	test( 'renders y-axis grid lines', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="y" />
-			</svg>
-		);
-		expect( screen.queryAllByTestId( 'x-grid' ) ).toHaveLength( 0 );
-		const yGridLines = screen.getAllByTestId( 'y-grid' );
-		expect( yGridLines.length ).toBeGreaterThan( 0 );
-	} );
-
-	test( 'renders both axes grid lines', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="xy" />
-			</svg>
-		);
-		const xGridLines = screen.getAllByTestId( 'x-grid' );
-		const yGridLines = screen.getAllByTestId( 'y-grid' );
-		expect( xGridLines.length ).toBeGreaterThan( 0 );
-		expect( yGridLines.length ).toBeGreaterThan( 0 );
-	} );
-
-	test( 'renders no grid lines when visibility is none', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="none" />
-			</svg>
-		);
-		expect( screen.queryAllByTestId( 'x-grid' ) ).toHaveLength( 0 );
-		expect( screen.queryAllByTestId( 'y-grid' ) ).toHaveLength( 0 );
-	} );
-} );

package/src/charts/private/single-chart-context/index.ts

@@ -1,8 +0,0 @@
-export { SingleChartContext, ChartInstanceContext } from './single-chart-context';
-export { useChartInstanceContext, useSingleChartContext } from './use-single-chart-context';
-export type {
-	ChartInstanceContextValue,
-	ChartInstanceRef,
-	SingleChartContextValue,
-	SingleChartRef,
-} from './single-chart-context';