@automattic/date-range-picker 1.0.0

package/src/date-range-content.tsx

@@ -0,0 +1,379 @@
+import { DateRangeCalendar, TZDate } from '@automattic/ui';
+import {
+	__experimentalText as Text,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { startOfMonth, subMonths } from 'date-fns';
+import { useState } from 'react';
+import { ButtonStack } from './button-stack';
+import { DateInputs } from './date-inputs';
+import { formatYmd, formatSiteYmd, parseYmdLocal } from './datetime';
+import { PresetsListbox } from './presets-listbox';
+import { computePresetRange, getActivePresetId, PresetId, presetDefs } from './utils';
+
+type DateRangeContentProps = {
+	isSmall: boolean;
+	showTwoMonths?: boolean;
+	fromDraft?: Date;
+	toDraft?: Date;
+	fromStr: string;
+	toStr: string;
+	setFromDraft: ( date?: Date ) => void;
+	setToDraft: ( date?: Date ) => void;
+	setFromStr: ( string: string ) => void;
+	setToStr: ( string: string ) => void;
+	timezoneString?: string;
+	gmtOffset?: number;
+	onChange: ( next: { start: Date; end: Date } ) => void;
+	onClose?: () => void;
+	compositeActiveId: string | null;
+	setCompositeActiveId: ( id: string | null ) => void;
+	today: Date;
+	todayStr: string;
+	mobileLabelId: string;
+	desktopLabelId: string;
+	disableFuture?: boolean;
+	disabledBefore?: Date;
+	defaultFallbackPreset?: PresetId;
+	hiddenPresets?: PresetId[];
+	inputsProps?: {
+		onStartFocus?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onEndFocus?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onStartBlur?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onEndBlur?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+	};
+};
+
+export function DateRangeContent( props: DateRangeContentProps ) {
+	const {
+		isSmall,
+		showTwoMonths = false,
+		fromDraft,
+		toDraft,
+		fromStr,
+		toStr,
+		setFromDraft,
+		setToDraft,
+		setFromStr,
+		setToStr,
+		timezoneString,
+		gmtOffset,
+		onChange,
+		onClose,
+		compositeActiveId,
+		setCompositeActiveId,
+		today,
+		todayStr,
+		mobileLabelId,
+		desktopLabelId,
+		disableFuture = true,
+		disabledBefore,
+		defaultFallbackPreset = 'last-7-days',
+		hiddenPresets,
+		inputsProps,
+	} = props;
+
+	// Avoid passing invalid or empty time zones to Intl consumers
+	const isValidIanaTimeZone = ( timeZone?: string ): timeZone is string => {
+		if ( ! timeZone ) {
+			return false;
+		}
+		try {
+			// Will throw for invalid IANA identifiers (including empty strings)
+			Intl.DateTimeFormat( 'en-US', { timeZone: timeZone } );
+			return true;
+		} catch ( _e ) {
+			return false;
+		}
+	};
+
+	const timeZoneForCalendar = isValidIanaTimeZone( timezoneString ) ? timezoneString : undefined;
+	const [ isTyping, setIsTyping ] = useState( false );
+	const [ inputsVersion, setInputsVersion ] = useState( 0 );
+
+	const clear = () => {
+		setFromDraft( undefined );
+		setToDraft( undefined );
+		setFromStr( '' );
+		setToStr( '' );
+		setIsTyping( false );
+		// Force controlled inputs to remount so any internal buffers are reset
+		setInputsVersion( ( version ) => version + 1 );
+	};
+
+	const canDefaultApply = ! fromDraft && ! toDraft && ! fromStr && ! toStr && ! isTyping;
+	const defaultPresetLabel =
+		presetDefs.find( ( p ) => p.id === defaultFallbackPreset )?.label || __( 'default range' );
+
+	const apply = () => {
+		if ( fromDraft && toDraft ) {
+			const [ startPoint, endPoint ] =
+				fromDraft <= toDraft ? [ fromDraft, toDraft ] : [ toDraft, fromDraft ];
+			onChange( { start: startPoint, end: endPoint } );
+			onClose?.();
+			return;
+		}
+		if ( canDefaultApply ) {
+			const range = computePresetRange( defaultFallbackPreset, today );
+			if ( range ) {
+				onChange( { start: range.from, end: range.to } );
+				onClose?.();
+			}
+		}
+	};
+
+	const setPreset = ( id: PresetId ) => {
+		const range = computePresetRange( id, today );
+		if ( ! range ) {
+			return;
+		}
+		setFromDraft( range.from );
+		setToDraft( range.to );
+		setFromStr( formatYmd( range.from, timezoneString, gmtOffset ) );
+		setToStr( formatYmd( range.to, timezoneString, gmtOffset ) );
+		onChange( { start: range.from, end: range.to } );
+		onClose?.();
+	};
+
+	const activePresetId: PresetId | undefined = ( () => {
+		const preset = getActivePresetId( fromDraft, toDraft, today );
+		if ( preset ) {
+			return preset;
+		}
+		// Only mark "custom" when both dates are present and do not match a known preset
+		if ( fromDraft && toDraft ) {
+			return 'custom';
+		}
+		// When cleared or incomplete, highlight nothing
+		return undefined;
+	} )();
+
+	// Site “today” as a site-day Date
+	const siteToday =
+		parseYmdLocal( formatYmd( today, timezoneString, gmtOffset ) ) ??
+		new Date( today.getFullYear(), today.getMonth(), today.getDate() );
+
+	// Month anchors in site time
+	const siteMonthStart = startOfMonth( siteToday );
+	const prevMonthStart = subMonths( siteMonthStart, 1 );
+
+	// Build calendar month refs
+	const makeTZMonthFromDate = ( d: Date ) =>
+		timeZoneForCalendar
+			? new TZDate( Date.UTC( d.getFullYear(), d.getMonth(), 1, 12 ), timeZoneForCalendar )
+			: new Date( d.getFullYear(), d.getMonth(), 1 );
+
+	const defaultMonth = showTwoMonths
+		? makeTZMonthFromDate( prevMonthStart )
+		: makeTZMonthFromDate( siteMonthStart );
+
+	const endMonth = makeTZMonthFromDate( siteMonthStart );
+
+	// Use TZDate for calendar selection when a valid IANA time zone is available
+	const selected =
+		timeZoneForCalendar && ( fromDraft || toDraft )
+			? {
+					from: fromDraft ? new TZDate( +fromDraft, timeZoneForCalendar ) : undefined,
+					to: toDraft ? new TZDate( +toDraft, timeZoneForCalendar ) : undefined,
+			  }
+			: { from: fromDraft ?? undefined, to: toDraft ?? undefined };
+
+	const disabledMatcher = ( () => {
+		const matchers: Array< { after: Date } | { before: Date } > = [];
+		if ( disableFuture ) {
+			matchers.push( { after: today } );
+		}
+		if ( disabledBefore ) {
+			matchers.push( { before: disabledBefore } );
+		}
+		if ( matchers.length === 0 ) {
+			return undefined;
+		}
+		return matchers.length === 1 ? matchers[ 0 ] : matchers;
+	} )();
+
+	const minInputStr = disabledBefore ? formatSiteYmd( disabledBefore ) : undefined;
+
+	return (
+		<VStack as="div" spacing={ 3 } style={ { padding: 12 } }>
+			<Text as="div" weight={ 600 } align="center" size="smallTitle">
+				{ __( 'Date Range' ) }
+			</Text>
+
+			{ isSmall ? (
+				<VStack as="div" spacing={ 2 }>
+					<PresetsListbox
+						labelId={ mobileLabelId }
+						activePresetId={ activePresetId }
+						onSelect={ setPreset }
+						compositeActiveId={ compositeActiveId }
+						setCompositeActiveId={ setCompositeActiveId }
+						hiddenPresets={ hiddenPresets }
+					/>
+
+					<DateInputs
+						key={ `inputs-${ inputsVersion }-mobile` }
+						fromStr={ fromStr }
+						toStr={ toStr }
+						onFromChange={ ( value ) => {
+							setFromStr( value );
+							const parsed = value ? parseYmdLocal( value ) || undefined : undefined;
+							setFromDraft( parsed );
+							setIsTyping( Boolean( value || toStr ) );
+						} }
+						onToChange={ ( value ) => {
+							setToStr( value );
+							const parsed = value ? parseYmdLocal( value ) || undefined : undefined;
+							setToDraft( parsed );
+							setIsTyping( Boolean( fromStr || value ) );
+						} }
+						todayStr={ todayStr }
+						minStr={ minInputStr }
+						onFromFocus={ ( e ) => {
+							setIsTyping( true );
+							inputsProps?.onStartFocus?.( e );
+						} }
+						onToFocus={ ( e ) => {
+							setIsTyping( true );
+							inputsProps?.onEndFocus?.( e );
+						} }
+						onFromBlur={ ( e ) => {
+							if ( ! fromStr && ! toStr ) {
+								setIsTyping( false );
+							}
+							inputsProps?.onStartBlur?.( e );
+						} }
+						onToBlur={ ( e ) => {
+							if ( ! fromStr && ! toStr ) {
+								setIsTyping( false );
+							}
+							inputsProps?.onEndBlur?.( e );
+						} }
+						stack
+						fromStyle={ { minWidth: 140 } }
+						toStyle={ { minWidth: 140 } }
+					/>
+				</VStack>
+			) : (
+				<HStack
+					as="div"
+					spacing={ 4 }
+					justify="flex-end"
+					className="daterange-inputs"
+					wrap={ false }
+					style={ { width: '100%' } }
+				>
+					<DateInputs
+						key={ `inputs-${ inputsVersion }-desktop` }
+						fromStr={ fromStr }
+						toStr={ toStr }
+						onFromChange={ ( value ) => {
+							setFromStr( value );
+							const parsed = value ? parseYmdLocal( value ) || undefined : undefined;
+							setFromDraft( parsed );
+							setIsTyping( Boolean( value || toStr ) );
+						} }
+						onToChange={ ( value ) => {
+							setToStr( value );
+							const parsed = value ? parseYmdLocal( value ) || undefined : undefined;
+							setToDraft( parsed );
+							setIsTyping( Boolean( fromStr || value ) );
+						} }
+						todayStr={ todayStr }
+						minStr={ minInputStr }
+						onFromFocus={ ( e ) => {
+							setIsTyping( true );
+							inputsProps?.onStartFocus?.( e );
+						} }
+						onToFocus={ ( e ) => {
+							setIsTyping( true );
+							inputsProps?.onEndFocus?.( e );
+						} }
+						onFromBlur={ ( e ) => {
+							if ( ! fromStr && ! toStr ) {
+								setIsTyping( false );
+							}
+							inputsProps?.onStartBlur?.( e );
+						} }
+						onToBlur={ ( e ) => {
+							if ( ! fromStr && ! toStr ) {
+								setIsTyping( false );
+							}
+							inputsProps?.onEndBlur?.( e );
+						} }
+						fromStyle={ { minWidth: 220, flex: '0 0 auto' } }
+						toStyle={ { minWidth: 220, flex: '0 0 auto' } }
+						justify="flex-end"
+						containerStyle={ { width: '100%' } }
+					/>
+				</HStack>
+			) }
+
+			<HStack as="div" spacing={ 4 } justify="flex-start" className="daterange-body" wrap={ false }>
+				{ ! isSmall && (
+					<PresetsListbox
+						labelId={ desktopLabelId }
+						activePresetId={ activePresetId }
+						onSelect={ setPreset }
+						compositeActiveId={ compositeActiveId }
+						setCompositeActiveId={ setCompositeActiveId }
+						hiddenPresets={ hiddenPresets }
+					/>
+				) }
+
+				<div className="daterange-calendar">
+					<DateRangeCalendar
+						timeZone={ timeZoneForCalendar }
+						numberOfMonths={ isSmall ? 1 : 2 }
+						defaultMonth={ defaultMonth }
+						endMonth={ endMonth }
+						disabled={ disabledMatcher }
+						excludeDisabled
+						selected={ selected }
+						onSelect={ ( range ) => {
+							const toNative = ( d?: Date ) => ( d ? new Date( d.getTime() ) : undefined );
+							if ( range?.from ) {
+								const from = toNative( range.from );
+								setFromDraft( from );
+								if ( from ) {
+									setFromStr( formatYmd( from, timezoneString, gmtOffset ) );
+								}
+							}
+							if ( range?.to ) {
+								const to = toNative( range.to );
+								setToDraft( to );
+								if ( to ) {
+									setToStr( formatYmd( to, timezoneString, gmtOffset ) );
+								}
+							}
+							setIsTyping( false );
+						} }
+					/>
+				</div>
+			</HStack>
+
+			<ButtonStack as="div" justify="flex-end">
+				<Button variant="secondary" onClick={ clear }>
+					{ __( 'Clear' ) }
+				</Button>
+				<Button
+					variant="primary"
+					onClick={ apply }
+					disabled={ ( ! fromDraft || ! toDraft ) && ! canDefaultApply }
+					aria-label={
+						/* translators: %s is the preset label, e.g. 'Last 30 days' */
+						canDefaultApply ? sprintf( __( 'Apply %s' ), defaultPresetLabel ) : __( 'Apply' )
+					}
+				>
+					{
+						/* translators: %s is the preset label, e.g. 'Last 30 days' */
+						canDefaultApply ? sprintf( __( 'Apply %s' ), defaultPresetLabel ) : __( 'Apply' )
+					}
+				</Button>
+			</ButtonStack>
+		</VStack>
+	);
+}

package/src/date-range-picker.tsx

@@ -0,0 +1,197 @@
+import { Dropdown, Tooltip, Button } from '@wordpress/components';
+import { useMediaQuery, useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { calendar } from '@wordpress/icons';
+import { useMemo, useState } from 'react';
+import { DateRangeContent } from './date-range-content';
+import { parseYmdLocal, formatYmd, formatSiteYmd } from './datetime';
+import { formatLabel } from './utils';
+import type { PresetId } from './utils';
+import './style.scss';
+
+export type DateRangePickerProps = {
+	start: Date;
+	end: Date;
+	onChange: ( next: { start: Date; end: Date } ) => void;
+	timezoneString?: string;
+	gmtOffset?: number;
+	locale: string;
+	disableFuture?: boolean;
+	disabledBefore?: Date;
+	defaultFallbackPreset?: PresetId; // preset to apply when inputs are empty and user presses Apply
+	hiddenPresets?: PresetId[];
+	inputsProps?: {
+		onStartFocus?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onEndFocus?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onStartBlur?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onEndBlur?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+	};
+};
+
+export function DateRangePicker( {
+	start,
+	end,
+	onChange,
+	gmtOffset,
+	timezoneString,
+	locale,
+	disableFuture = true,
+	disabledBefore,
+	defaultFallbackPreset = 'last-7-days',
+	hiddenPresets,
+	inputsProps,
+}: DateRangePickerProps ) {
+	const isSmall = useMediaQuery( '(max-width: 600px)' );
+	// Use a wider breakpoint to decide when two calendars can fit comfortably
+	const showTwoMonths = useMediaQuery( '(min-width: 900px)' );
+	const instanceId = useInstanceId( DateRangePicker, 'daterange' );
+	const mobileLabelId = `presets-label-${ instanceId }-mobile`;
+	const desktopLabelId = `presets-label-${ instanceId }-desktop`;
+
+	const label = formatLabel( start, end, locale );
+
+	// Reset internal draft state when key inputs change by remounting the inner component
+	const resetKey = [
+		formatSiteYmd( start ),
+		formatSiteYmd( end ),
+		timezoneString ?? '',
+		gmtOffset ?? '',
+	].join( '|' );
+
+	return (
+		<Dropdown
+			popoverProps={ { className: 'daterange-popover' } }
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				<Tooltip text={ __( 'Select a date range' ) } placement="top">
+					<div className="daterange-input__toggle">
+						<Button
+							type="button"
+							variant="tertiary"
+							onClick={ onToggle }
+							aria-haspopup="dialog"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								/* Translators: %s: date range label */
+								__( 'Date range: %s. Activate to open calendar.' ),
+								label
+							) }
+							className="daterange-input__field"
+							icon={ calendar }
+							iconPosition="right"
+						>
+							<span aria-hidden="true" className="daterange-input__text">
+								{ label }
+							</span>
+						</Button>
+					</div>
+				</Tooltip>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<DateRangePickerInner
+					key={ resetKey }
+					isSmall={ isSmall }
+					showTwoMonths={ showTwoMonths }
+					start={ start }
+					end={ end }
+					timezoneString={ timezoneString }
+					gmtOffset={ gmtOffset }
+					onChange={ onChange }
+					onClose={ onClose }
+					mobileLabelId={ mobileLabelId }
+					desktopLabelId={ desktopLabelId }
+					disableFuture={ disableFuture }
+					disabledBefore={ disabledBefore }
+					defaultFallbackPreset={ defaultFallbackPreset }
+					hiddenPresets={ hiddenPresets }
+					inputsProps={ inputsProps }
+				/>
+			) }
+		/>
+	);
+}
+
+function DateRangePickerInner( {
+	isSmall,
+	showTwoMonths,
+	start,
+	end,
+	timezoneString,
+	gmtOffset,
+	onChange,
+	onClose,
+	mobileLabelId,
+	desktopLabelId,
+	disableFuture,
+	disabledBefore,
+	defaultFallbackPreset,
+	hiddenPresets,
+	inputsProps,
+}: {
+	isSmall: boolean;
+	showTwoMonths: boolean;
+	start: Date;
+	end: Date;
+	timezoneString?: string;
+	gmtOffset?: number;
+	onChange: ( next: { start: Date; end: Date } ) => void;
+	onClose: () => void;
+	mobileLabelId: string;
+	desktopLabelId: string;
+	disableFuture: boolean;
+	disabledBefore?: Date;
+	defaultFallbackPreset: PresetId;
+	hiddenPresets?: PresetId[];
+	inputsProps?: {
+		onStartFocus?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onEndFocus?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onStartBlur?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+		onEndBlur?: ( e: React.FocusEvent< HTMLInputElement > ) => void;
+	};
+} ) {
+	const [ fromDraft, setFromDraft ] = useState< Date | undefined >( () => start );
+	const [ toDraft, setToDraft ] = useState< Date | undefined >( () => end );
+	const [ fromStr, setFromStr ] = useState( () => formatSiteYmd( start ) );
+	const [ toStr, setToStr ] = useState( () => formatSiteYmd( end ) );
+	// Tracks the keyboard-focused preset in the listbox (roving focus), not the selected preset.
+	const [ compositeActiveId, setCompositeActiveId ] = useState< string | null >( null );
+
+	const today = useMemo( () => {
+		const parsed = parseYmdLocal( formatYmd( new Date(), timezoneString, gmtOffset ) );
+		// Fallback to local midnight if parsing ever fails
+		return (
+			parsed ?? new Date( new Date().getFullYear(), new Date().getMonth(), new Date().getDate() )
+		);
+	}, [ timezoneString, gmtOffset ] );
+
+	const todayStr = useMemo( () => formatSiteYmd( today ), [ today ] );
+
+	return (
+		<DateRangeContent
+			isSmall={ isSmall }
+			fromDraft={ fromDraft }
+			toDraft={ toDraft }
+			fromStr={ fromStr }
+			toStr={ toStr }
+			setFromDraft={ setFromDraft }
+			setToDraft={ setToDraft }
+			setFromStr={ setFromStr }
+			setToStr={ setToStr }
+			timezoneString={ timezoneString }
+			gmtOffset={ gmtOffset }
+			onChange={ onChange }
+			onClose={ onClose }
+			compositeActiveId={ compositeActiveId }
+			setCompositeActiveId={ setCompositeActiveId }
+			today={ today }
+			todayStr={ todayStr }
+			mobileLabelId={ mobileLabelId }
+			desktopLabelId={ desktopLabelId }
+			disableFuture={ disableFuture }
+			disabledBefore={ disabledBefore }
+			showTwoMonths={ showTwoMonths }
+			defaultFallbackPreset={ defaultFallbackPreset }
+			hiddenPresets={ hiddenPresets }
+			inputsProps={ inputsProps }
+		/>
+	);
+}

package/src/datetime.ts

@@ -0,0 +1,58 @@
+import { dateI18n } from '@wordpress/date';
+import { parse, isValid, format } from 'date-fns';
+
+const YMD_REGEX = /^\d{4}-\d{2}-\d{2}$/;
+
+export function formatDate(
+	date: Date,
+	locale: string,
+	formatOptions: Intl.DateTimeFormatOptions = { dateStyle: 'medium' }
+) {
+	if ( isNaN( date.getTime() ) ) {
+		return '';
+	}
+	return new Intl.DateTimeFormat( locale, formatOptions ).format( date );
+}
+
+/**
+ * Parse a date string in the format "YYYY-MM-DD" (local time).
+ */
+export function parseYmdLocal( value: string ): Date | null {
+	if ( ! YMD_REGEX.test( value ) ) {
+		return null;
+	}
+	const parsed = parse( value, 'yyyy-MM-dd', new Date() );
+	if ( ! isValid( parsed ) ) {
+		return null;
+	}
+	// Ensure strict match (reject overflows like 2023-02-31 -> 2023-03-03)
+	return format( parsed, 'yyyy-MM-dd' ) === value ? parsed : null;
+}
+
+/**
+ * Format a date as a site calendar day (YYYY-MM-DD).
+ */
+export function formatYmd( date: Date, timezoneString?: string, gmtOffset?: number ) {
+	if ( timezoneString ) {
+		return dateI18n( 'Y-m-d', date, timezoneString );
+	}
+	if ( typeof gmtOffset === 'number' ) {
+		const shifted = new Date( date.getTime() + gmtOffset * 60 * 60 * 1000 );
+		const year = shifted.getUTCFullYear();
+		const month = String( shifted.getUTCMonth() + 1 ).padStart( 2, '0' );
+		const day = String( shifted.getUTCDate() ).padStart( 2, '0' );
+		return `${ year }-${ month }-${ day }`;
+	}
+	return dateI18n( 'Y-m-d', date );
+}
+
+/**
+ * Format a Date that already represents a site calendar day.
+ * This avoids reapplying timezone math to dates coming from the picker or URL.
+ */
+export function formatSiteYmd( date: Date ) {
+	const year = date.getFullYear();
+	const month = String( date.getMonth() + 1 ).padStart( 2, '0' );
+	const day = String( date.getDate() ).padStart( 2, '0' );
+	return `${ year }-${ month }-${ day }`;
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export { DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps } from './date-range-picker';
+export {
+	computePresetRange,
+	formatLabel,
+	getActivePresetId,
+	isLast7Days,
+	presetDefs,
+} from './utils';
+export type { PresetId } from './utils';
+export { formatYmd, formatSiteYmd, parseYmdLocal } from './datetime';

package/src/presets-listbox.tsx

@@ -0,0 +1,65 @@
+import {
+	Button,
+	__experimentalVStack as VStack,
+	Composite,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { presetDefs } from './utils';
+import type { PresetId } from './utils';
+
+type PresetsListboxProps = {
+	labelId: string;
+	activePresetId?: PresetId;
+	onSelect: ( id: PresetId ) => void;
+	compositeActiveId: string | null;
+	setCompositeActiveId: ( id: string | null ) => void;
+	hiddenPresets?: PresetId[];
+};
+
+export function PresetsListbox( {
+	labelId,
+	activePresetId,
+	onSelect,
+	compositeActiveId,
+	setCompositeActiveId,
+	hiddenPresets,
+}: PresetsListboxProps ) {
+	const items: ReadonlyArray< { id: PresetId; label: string } > = [
+		...presetDefs,
+		{ id: 'custom' as const, label: __( 'Custom' ) },
+	].filter( ( item ) => ! hiddenPresets?.includes( item.id ) );
+
+	return (
+		<VStack justify="flex-start" alignment="stretch" spacing={ 1 } className="daterange-presets">
+			<VisuallyHidden id={ labelId }>{ __( 'Date range presets' ) }</VisuallyHidden>
+			<Composite
+				aria-labelledby={ labelId }
+				activeId={ compositeActiveId ?? undefined }
+				setActiveId={ ( id ) => setCompositeActiveId( id ?? null ) }
+				focusLoop
+				virtualFocus
+				role="listbox"
+			>
+				<VStack justify="flex-start" alignment="stretch" spacing={ 1 }>
+					{ items.map( ( preset ) => {
+						const isSelected = activePresetId === preset.id;
+						return (
+							<Composite.Item
+								key={ preset.id }
+								id={ preset.id }
+								render={ <Button size="compact" variant={ isSelected ? 'primary' : undefined } /> }
+								onClick={ () => onSelect( preset.id ) }
+								role="option"
+								aria-selected={ isSelected || undefined }
+								className="preset-listbox__item"
+							>
+								{ preset.label }
+							</Composite.Item>
+						);
+					} ) }
+				</VStack>
+			</Composite>
+		</VStack>
+	);
+}