@automattic/charts 4.14.0 → 4.15.1

package/src/charts/bar-chart/use-bar-legend-items.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useChartLegendItems } from '../../components/legend/hooks/use-chart-legend-items';
+import { getDrawnSeries } from './private/stack-layout';
 import { useBarColors } from './use-bar-colors';
 import type { ChartLegendOptions } from '../../components/legend/hooks/use-chart-legend-items';
 import type { BaseLegendItem } from '../../components/legend/types';
@@ -58,17 +59,18 @@ function forBarLayout(
 /**
  * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
  *
- * @param data        - The series the chart draws.
+ * @param allData     - The chart's series; those the layout does not draw get no item.
  * @param options     - The legend options, and the layout the bars are drawn in.
  * @param legendShape - The shape of the legend swatches.
  * @return The legend items.
  */
 export function useBarLegendItems(
-	data: SeriesData[],
+	allData: SeriesData[],
 	options: BarLegendOptions = {},
 	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
 	const { layout } = options;
+	const data = useMemo( () => getDrawnSeries( allData, layout ), [ allData, layout ] );
 	const getBarColors = useBarColors();
 	const seriesColors = useMemo(
 		() => ( layout ? getBarColors( data, { layout } ) : undefined ),

package/src/charts/bar-list-chart/bar-list-chart.tsx

@@ -20,6 +20,8 @@ export interface BarListChartProps extends Exclude<
 	BarChartProps,
 	'orientation' | 'size' | 'gridVisibility'
 > {
+	/** Bar lists are always horizontal, and horizontal bars ignore `compactWhenShort`. */
+	compactWhenShort?: never;
 	options?: {
 		/**
 		 * Scale for the y axis. Exclude the type property.

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)'
-			);
-		} );
 	} );
 } );

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

@@ -41,9 +41,15 @@ import { ChartLayout } from '../private/chart-layout';
 import { DefaultGlyph } from '../private/default-glyph';
 import { formatReading, isInvalidReading, isReading } from '../private/readings';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
+import {
+	getTickDecimals,
+	getTickDecimalsDomain,
+	hasOnlyWholeNumbers,
+	TickDecimals,
+} from '../private/tick-decimals';
 import { getCurveType } from '../private/time-axis';
 import { buildTimeAxisOptions } from '../private/time-axis-options';
-import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
+import { useCompactWhenShort } from '../private/use-compact-when-short';
 import { withResponsive } from '../private/with-responsive';
 import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
@@ -267,6 +273,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			children,
 			gridVisibility,
 			gap = 'md',
+			compactWhenShort = false,
 		},
 		ref
 	) => {
@@ -301,6 +308,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 
 		// Process children for composition API (Legend, etc.)
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LineChart' );
+		const { isCompact, compactMargin } = useCompactWhenShort( compactWhenShort, height );
 		const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
 
 		// Callback for ChartLayout to notify us when the measured content height changes.
@@ -438,31 +446,47 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			() => hasOnlyWholeNumbers( visibleSeries ),
 			[ visibleSeries ]
 		);
+		const isLogScale = options?.yScale?.type === 'log';
+		// A log axis has no decimal steps to hold ticks to.
+		const callerTickDecimals = isLogScale ? undefined : options?.axis?.y?.tickDecimals;
+		const yTickDecimals = getTickDecimals( hasWholeNumberValues, callerTickDecimals );
 
 		const chartOptions = useMemo( () => {
-			const fallbackYDomain = getFallbackYDomain(
-				visibleReadingExtent,
-				options?.yScale?.type === 'log'
-			);
+			const fallbackYDomain = getFallbackYDomain( visibleReadingExtent, isLogScale );
+			const { tickDecimals, ...yAxisOptions } = options?.axis?.y ?? {};
+			const tickDecimalsDomain =
+				isLogScale ||
+				tickDecimals === undefined ||
+				options?.yScale?.domain ||
+				yAxisOptions.tickValues
+					? undefined
+					: getTickDecimalsDomain(
+							yDomain ?? fallbackYDomain ?? visibleReadingExtent,
+							yTickDecimals
+						);
 
 			return {
 				axis: {
-					x: buildTimeAxisOptions( {
-						dataSorted,
-						width,
-						axisOptions: options?.axis?.x,
-						scaleDomain: options?.xScale?.domain,
-						zoomDomain: zoom.domain,
-						formatting,
-						// A hidden line is unmounted, so visx scales to the rest.
-						isSeriesRendered: series => isSeriesVisible( series.label ),
-					} ),
+					x: {
+						...buildTimeAxisOptions( {
+							dataSorted,
+							width,
+							axisOptions: options?.axis?.x,
+							scaleDomain: options?.xScale?.domain,
+							zoomDomain: zoom.domain,
+							formatting,
+							// A hidden line is unmounted, so visx scales to the rest.
+							isSeriesRendered: series => isSeriesVisible( series.label ),
+						} ),
+						...( isCompact && { display: false } ),
+					},
 					y: {
 						orientation: 'left' as const,
 						numTicks: 4,
 						tickFormat: formatNumberCompact as TickFormatter< number >,
 						display: true,
-						...options?.axis?.y,
+						...yAxisOptions,
+						...( isCompact && { display: false } ),
 					},
 				},
 				xScale: {
@@ -476,6 +500,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 					zero: false,
 					...( fallbackYDomain ? { domain: fallbackYDomain } : {} ),
 					...( yDomain ? { domain: yDomain } : {} ),
+					...( tickDecimalsDomain ? { domain: tickDecimalsDomain } : {} ),
 					...options?.yScale,
 				},
 			};
@@ -486,8 +511,11 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			zoom.domain,
 			yDomain,
 			visibleReadingExtent,
+			isLogScale,
+			yTickDecimals,
 			formatting,
 			isSeriesVisible,
+			isCompact,
 		] );
 
 		// Classified from the rendered series, like the axis above: a hidden
@@ -588,7 +616,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;
 		}
 
-		const legendElement = showLegend && (
+		const legendElement = showLegend && ! isCompact && (
 			<Legend
 				orientation={ legend.orientation ?? 'horizontal' }
 				alignment={ legend.alignment ?? 'center' }
@@ -617,7 +645,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				<ChartLayout
 					legendPosition={ legendPosition }
 					legendElement={ legendElement }
-					legendChildren={ legendChildren }
+					legendChildren={ isCompact ? [] : legendChildren }
 					gap={ gap }
 					className={ clsx(
 						'line-chart',
@@ -655,6 +683,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											height={ chartHeight }
 											margin={ {
 												...defaultMargin,
+												...compactMargin,
 												...margin,
 											} }
 											// xScale and yScale could be set in Axis as well, but they are `scale` props there.
@@ -666,18 +695,18 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											{ /* With every series hidden there is no data to scale against, so the grid and
 											     axes are dropped while the empty state stands in — otherwise they render
 											     squished at the top. */ }
-											<WholeNumberTicks
+											<TickDecimals
 												axis="y"
 												numTicks={ chartOptions.axis.y.numTicks }
-												enabled={
-													hasWholeNumberValues &&
-													! chartOptions.axis.y.tickValues &&
-													! options?.yScale?.domain
+												decimals={
+													! chartOptions.axis.y.tickValues && ! options?.yScale?.domain
+														? yTickDecimals
+														: undefined
 												}
 											>
 												{ tickValues => (
 													<>
-														{ ! allSeriesHidden && gridVisibility !== 'none' && (
+														{ ! allSeriesHidden && gridVisibility !== 'none' && ! isCompact && (
 															<Grid
 																columns={ false }
 																numTicks={ chartOptions.axis.y.numTicks }
@@ -695,7 +724,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 														) }
 													</>
 												) }
-											</WholeNumberTicks>
+											</TickDecimals>
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState
@@ -704,7 +733,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 													width={ width }
 													height={ chartHeight }
 												>
-													{ getAllHiddenMessage( legendInteractive, 'series' ) }
+													{ getAllHiddenMessage( legendInteractive && ! isCompact, 'series' ) }
 												</SvgEmptyState>
 											) : null }
 

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

@@ -313,6 +313,92 @@ describe( 'LineChart', () => {
 			expect( ticks.sort() ).toEqual( [ '0', '1' ] );
 		} );
 
+		test.each( [
+			[ 'small amounts', 0, [ 0.4, 1.2, 2.1, 2.6 ], [ '0', '1', '2' ] ],
+			[ 'amounts under one step', 0, [ 0.31, 0.55, 0.73 ], [ '0', '1' ] ],
+			[ 'cents', 2, [ 0.4, 1.2, 1.6 ], [ '0.00', '0.50', '1.00', '1.50' ] ],
+		] )( 'holds ticks to tickDecimals for %s', ( _, tickDecimals, values, expected ) => {
+			renderWithTheme( {
+				data: [
+					{
+						label: 'Series A',
+						data: values.map( ( value, i ) => ( { date: new Date( 2024, i + 2, 1 ), value } ) ),
+					},
+				],
+				options: {
+					yScale: { zero: true },
+					axis: {
+						y: { tickDecimals, tickFormat: ( value: number ) => value.toFixed( tickDecimals ) },
+					},
+				},
+			} );
+
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( expected );
+		} );
+
+		test( "leaves a caller's tickValues axis unwidened by tickDecimals", () => {
+			const linePath = ( y: { tickValues: number[]; tickDecimals?: number } ) => {
+				const { unmount } = renderWithTheme( {
+					data: [
+						{
+							label: 'Series A',
+							data: [ 0.31, 0.55, 0.73 ].map( ( value, i ) => ( {
+								date: new Date( 2024, i + 2, 1 ),
+								value,
+							} ) ),
+						},
+					],
+					options: { axis: { y } },
+				} );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
+				// eslint-disable-next-line testing-library/no-node-access -- visx's stroke is a <path class="visx-line">.
+				const d = chart.querySelector( 'path.visx-line' )?.getAttribute( 'd' );
+				unmount();
+				return d;
+			};
+
+			expect( linePath( { tickValues: [ 0.4, 0.6 ], tickDecimals: 0 } ) ).toBe(
+				linePath( { tickValues: [ 0.4, 0.6 ] } )
+			);
+		} );
+
+		test( 'widens with the decimals it ticks at when a hidden series keeps its place in the domain', () => {
+			renderWithTheme( {
+				rescaleYOnVisibilityChange: false,
+				defaultHiddenSeries: [ 'Series B' ],
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 0, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+					{
+						label: 'Series B',
+						data: [ 0.001, 0.003, 0.004 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+				options: {
+					yScale: { zero: true },
+					axis: { y: { tickDecimals: 2, tickFormat: ( value: number ) => value.toFixed( 2 ) } },
+				},
+			} );
+
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( [ '0.00', '1.00' ] );
+		} );
+
 		test( 'ignores a hidden fractional series when checking for whole numbers', () => {
 			renderWithTheme( {
 				defaultHiddenSeries: [ 'Series B' ],

package/src/charts/line-chart/types.ts

@@ -5,6 +5,7 @@ import type {
 	SeriesData,
 	SeriesChartLegendConfig,
 	SeriesVisibilityProps,
+	CompactWhenShortProps,
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
@@ -30,7 +31,8 @@ export type RenderLineGlyphProps< Datum extends object > = GlyphProps< Datum > &
 	position?: 'start' | 'end';
 };
 
-export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
+export interface LineChartProps
+	extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps, CompactWhenShortProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */