@wordpress/components 25.14.0 → 25.15.0

package/src/composite/test/index.tsx

@@ -0,0 +1,576 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Composite as ReakitComposite,
+	CompositeGroup as ReakitCompositeGroup,
+	CompositeItem as ReakitCompositeItem,
+	useCompositeState as ReakitUseCompositeState,
+} from '..';
+
+const COMPOSITE_SUITES = {
+	reakit: {
+		Composite: ReakitComposite,
+		CompositeGroup: ReakitCompositeGroup,
+		CompositeItem: ReakitCompositeItem,
+		useCompositeState: ReakitUseCompositeState,
+	},
+};
+
+type InitialState = Parameters< typeof ReakitUseCompositeState >[ 0 ];
+
+// It was decided not to test the full API, instead opting
+// to cover basic usage, with a view to adding broader support
+// for the original API should the need arise. As such we are
+// only testing here for standard usage.
+// See https://github.com/WordPress/gutenberg/pull/56645
+
+describe.each( Object.entries( COMPOSITE_SUITES ) )(
+	'Validate %s implementation',
+	( _, { Composite, CompositeGroup, CompositeItem, useCompositeState } ) => {
+		function useSpreadProps( initialState?: InitialState ) {
+			return useCompositeState( initialState );
+		}
+
+		function useStateProps( initialState?: InitialState ) {
+			return {
+				state: useCompositeState( initialState ),
+			};
+		}
+
+		function OneDimensionalTest( { ...props } ) {
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeItem { ...props }>Item 1</CompositeItem>
+					<CompositeItem { ...props }>Item 2</CompositeItem>
+					<CompositeItem { ...props }>Item 3</CompositeItem>
+				</Composite>
+			);
+		}
+
+		function getOneDimensionalItems() {
+			return {
+				item1: screen.getByText( 'Item 1' ),
+				item2: screen.getByText( 'Item 2' ),
+				item3: screen.getByText( 'Item 3' ),
+			};
+		}
+
+		function TwoDimensionalTest( { ...props } ) {
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeGroup role="row" { ...props }>
+						<CompositeItem { ...props }>Item A1</CompositeItem>
+						<CompositeItem { ...props }>Item A2</CompositeItem>
+						<CompositeItem { ...props }>Item A3</CompositeItem>
+					</CompositeGroup>
+					<CompositeGroup role="row" { ...props }>
+						<CompositeItem { ...props }>Item B1</CompositeItem>
+						<CompositeItem { ...props }>Item B2</CompositeItem>
+						<CompositeItem { ...props }>Item B3</CompositeItem>
+					</CompositeGroup>
+					<CompositeGroup role="row" { ...props }>
+						<CompositeItem { ...props }>Item C1</CompositeItem>
+						<CompositeItem { ...props }>Item C2</CompositeItem>
+						<CompositeItem { ...props }>Item C3</CompositeItem>
+					</CompositeGroup>
+				</Composite>
+			);
+		}
+
+		function getTwoDimensionalItems() {
+			return {
+				itemA1: screen.getByText( 'Item A1' ),
+				itemA2: screen.getByText( 'Item A2' ),
+				itemA3: screen.getByText( 'Item A3' ),
+				itemB1: screen.getByText( 'Item B1' ),
+				itemB2: screen.getByText( 'Item B2' ),
+				itemB3: screen.getByText( 'Item B3' ),
+				itemC1: screen.getByText( 'Item C1' ),
+				itemC2: screen.getByText( 'Item C2' ),
+				itemC3: screen.getByText( 'Item C3' ),
+			};
+		}
+
+		function ShiftTest( { ...props } ) {
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeGroup role="row" { ...props }>
+						<CompositeItem { ...props }>Item A1</CompositeItem>
+					</CompositeGroup>
+					<CompositeGroup role="row" { ...props }>
+						<CompositeItem { ...props }>Item B1</CompositeItem>
+						<CompositeItem { ...props }>Item B2</CompositeItem>
+					</CompositeGroup>
+					<CompositeGroup role="row" { ...props }>
+						<CompositeItem { ...props }>Item C1</CompositeItem>
+						<CompositeItem { ...props } disabled>
+							Item C2
+						</CompositeItem>
+					</CompositeGroup>
+				</Composite>
+			);
+		}
+
+		function getShiftTestItems() {
+			return {
+				itemA1: screen.getByText( 'Item A1' ),
+				itemB1: screen.getByText( 'Item B1' ),
+				itemB2: screen.getByText( 'Item B2' ),
+				itemC1: screen.getByText( 'Item C1' ),
+				itemC2: screen.getByText( 'Item C2' ),
+			};
+		}
+
+		describe.each( [
+			[ 'With spread state', useSpreadProps ],
+			[ 'With `state` prop', useStateProps ],
+		] )( '%s', ( __, useProps ) => {
+			function useOneDimensionalTest( initialState?: InitialState ) {
+				const Test = () => (
+					<OneDimensionalTest { ...useProps( initialState ) } />
+				);
+				render( <Test /> );
+				return getOneDimensionalItems();
+			}
+
+			test( 'Renders as a single tab stop', async () => {
+				const user = userEvent.setup();
+				const Test = () => (
+					<>
+						<button>Before</button>
+						<OneDimensionalTest { ...useProps() } />
+						<button>After</button>
+					</>
+				);
+				render( <Test /> );
+
+				await user.tab();
+				expect( screen.getByText( 'Before' ) ).toHaveFocus();
+				await user.tab();
+				expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+				await user.tab();
+				expect( screen.getByText( 'After' ) ).toHaveFocus();
+				await user.tab( { shift: true } );
+				expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+			} );
+
+			test( 'Excludes disabled items', async () => {
+				const user = userEvent.setup();
+				const Test = () => {
+					const props = useProps();
+					return (
+						<Composite
+							{ ...props }
+							aria-label={ expect.getState().currentTestName }
+						>
+							<CompositeItem { ...props }>Item 1</CompositeItem>
+							<CompositeItem { ...props } disabled>
+								Item 2
+							</CompositeItem>
+							<CompositeItem { ...props }>Item 3</CompositeItem>
+						</Composite>
+					);
+				};
+				render( <Test /> );
+
+				const { item1, item2, item3 } = getOneDimensionalItems();
+
+				expect( item2 ).toBeDisabled();
+
+				await user.tab();
+				expect( item1 ).toHaveFocus();
+				await user.keyboard( '[ArrowDown]' );
+				expect( item2 ).not.toHaveFocus();
+				expect( item3 ).toHaveFocus();
+			} );
+
+			test( 'Includes focusable disabled items', async () => {
+				const user = userEvent.setup();
+				const Test = () => {
+					const props = useProps();
+					return (
+						<Composite
+							{ ...props }
+							aria-label={ expect.getState().currentTestName }
+						>
+							<CompositeItem { ...props }>Item 1</CompositeItem>
+							<CompositeItem { ...props } disabled focusable>
+								Item 2
+							</CompositeItem>
+							<CompositeItem { ...props }>Item 3</CompositeItem>
+						</Composite>
+					);
+				};
+				render( <Test /> );
+				const { item1, item2, item3 } = getOneDimensionalItems();
+
+				expect( item2 ).toBeEnabled();
+				expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
+
+				await user.tab();
+				expect( item1 ).toHaveFocus();
+				await user.keyboard( '[ArrowDown]' );
+				expect( item2 ).toHaveFocus();
+				expect( item3 ).not.toHaveFocus();
+			} );
+
+			test( 'Supports `baseId`', async () => {
+				const { item1, item2, item3 } = useOneDimensionalTest( {
+					baseId: 'test-id',
+				} );
+
+				expect( item1.id ).toMatch( 'test-id-1' );
+				expect( item2.id ).toMatch( 'test-id-2' );
+				expect( item3.id ).toMatch( 'test-id-3' );
+			} );
+
+			test( 'Supports `currentId`', async () => {
+				const user = userEvent.setup();
+				const { item2 } = useOneDimensionalTest( {
+					baseId: 'test-id',
+					currentId: 'test-id-2',
+				} );
+
+				await user.tab();
+				expect( item2 ).toHaveFocus();
+			} );
+		} );
+
+		describe.each( [
+			[
+				'When LTR',
+				false,
+				{ previous: 'ArrowLeft', next: 'ArrowRight' },
+			],
+			[ 'When RTL', true, { previous: 'ArrowRight', next: 'ArrowLeft' } ],
+		] )( '%s', ( _when, rtl, { previous, next } ) => {
+			function useOneDimensionalTest( initialState?: InitialState ) {
+				const Test = () => (
+					<OneDimensionalTest { ...useStateProps( initialState ) } />
+				);
+				render( <Test /> );
+				return getOneDimensionalItems();
+			}
+
+			function useTwoDimensionalTest( initialState?: InitialState ) {
+				const Test = () => (
+					<TwoDimensionalTest { ...useStateProps( initialState ) } />
+				);
+				render( <Test /> );
+				return getTwoDimensionalItems();
+			}
+
+			function useShiftTest( shift: boolean ) {
+				const Test = () => (
+					<ShiftTest { ...useStateProps( { rtl, shift } ) } />
+				);
+				render( <Test /> );
+				return getShiftTestItems();
+			}
+
+			describe( 'In one dimension', () => {
+				test( 'All directions work with no orientation', async () => {
+					const user = userEvent.setup();
+					const { item1, item2, item3 } = useOneDimensionalTest( {
+						rtl,
+					} );
+
+					await user.tab();
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[End]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[Home]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[PageDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[PageUp]' );
+					expect( item1 ).toHaveFocus();
+				} );
+
+				test( 'Only left/right work with horizontal orientation', async () => {
+					const user = userEvent.setup();
+					const { item1, item2, item3 } = useOneDimensionalTest( {
+						rtl,
+						orientation: 'horizontal',
+					} );
+
+					await user.tab();
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[End]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[Home]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[PageDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[PageUp]' );
+					expect( item1 ).toHaveFocus();
+				} );
+
+				test( 'Only up/down work with vertical orientation', async () => {
+					const user = userEvent.setup();
+					const { item1, item2, item3 } = useOneDimensionalTest( {
+						rtl,
+						orientation: 'vertical',
+					} );
+
+					await user.tab();
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[End]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[Home]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[PageDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[PageUp]' );
+					expect( item1 ).toHaveFocus();
+				} );
+
+				test( 'Focus wraps with loop enabled', async () => {
+					const user = userEvent.setup();
+					const { item1, item2, item3 } = useOneDimensionalTest( {
+						rtl,
+						loop: true,
+					} );
+
+					await user.tab();
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item2 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( item3 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( item1 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( item3 ).toHaveFocus();
+				} );
+			} );
+
+			describe( 'In two dimensions', () => {
+				test( 'All directions work as standard', async () => {
+					const user = userEvent.setup();
+					const {
+						itemA1,
+						itemA2,
+						itemA3,
+						itemB1,
+						itemB2,
+						itemC1,
+						itemC3,
+					} = useTwoDimensionalTest( { rtl } );
+
+					await user.tab();
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemB1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemB2 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( itemA2 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[End]' );
+					expect( itemA3 ).toHaveFocus();
+					await user.keyboard( '[PageDown]' );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( '[Home]' );
+					expect( itemC1 ).toHaveFocus();
+					await user.keyboard( '[PageUp]' );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '{Control>}[End]{/Control}' );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( '{Control>}[Home]{/Control}' );
+					expect( itemA1 ).toHaveFocus();
+				} );
+
+				test( 'Focus wraps around rows/columns with loop enabled', async () => {
+					const user = userEvent.setup();
+					const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
+						useTwoDimensionalTest( { rtl, loop: true } );
+
+					await user.tab();
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemA2 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemA3 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemB1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemC1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( itemA3 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( itemC3 ).toHaveFocus();
+				} );
+
+				test( 'Focus moves between rows/columns with wrap enabled', async () => {
+					const user = userEvent.setup();
+					const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
+						useTwoDimensionalTest( { rtl, wrap: true } );
+
+					await user.tab();
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemA2 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemA3 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemB1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemC1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemA2 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '{Control>}[End]{/Control}' );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemC3 ).toHaveFocus();
+				} );
+
+				test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
+					const user = userEvent.setup();
+					const { itemA1, itemC3 } = useTwoDimensionalTest( {
+						rtl,
+						loop: true,
+						wrap: true,
+					} );
+
+					await user.tab();
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( `[${ previous }]` );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					expect( itemC3 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemA1 ).toHaveFocus();
+				} );
+
+				test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
+					const user = userEvent.setup();
+					const { itemA1, itemB1, itemB2, itemC1 } =
+						useShiftTest( true );
+
+					await user.tab();
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemB1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemB2 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					// A2 doesn't exist
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemB1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemB2 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					// C2 is disabled
+					expect( itemC1 ).toHaveFocus();
+				} );
+
+				test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
+					const user = userEvent.setup();
+					const { itemA1, itemB1, itemB2 } = useShiftTest( false );
+
+					await user.tab();
+					expect( itemA1 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					expect( itemB1 ).toHaveFocus();
+					await user.keyboard( `[${ next }]` );
+					expect( itemB2 ).toHaveFocus();
+					await user.keyboard( '[ArrowUp]' );
+					// A2 doesn't exist
+					expect( itemB2 ).toHaveFocus();
+					await user.keyboard( '[ArrowDown]' );
+					// C2 is disabled
+					expect( itemB2 ).toHaveFocus();
+				} );
+			} );
+		} );
+	}
+);

package/src/context/wordpress-component.ts

@@ -8,14 +8,19 @@ export type WordPressComponentProps<
 	/** Prop types. */
 	P,
 	/** The HTML element to inherit props from. */
-	T extends React.ElementType,
+	T extends React.ElementType | null,
 	/** Supports polymorphism through the `as` prop. */
 	IsPolymorphic extends boolean = true,
 > = P &
-	// The `children` prop is being explicitly omitted since it is otherwise implicitly added
-	// by `ComponentPropsWithRef`. The context is that components should require the `children`
-	// prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
-	Omit< React.ComponentPropsWithoutRef< T >, 'as' | keyof P | 'children' > &
+	( T extends React.ElementType
+		? // The `children` prop is being explicitly omitted since it is otherwise implicitly added
+		  // by `ComponentPropsWithRef`. The context is that components should require the `children`
+		  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
+		  Omit<
+				React.ComponentPropsWithoutRef< T >,
+				'as' | keyof P | 'children'
+		  >
+		: {} ) &
 	( IsPolymorphic extends true
 		? {
 				/** The HTML element or React component to render the component as. */
@@ -24,7 +29,7 @@ export type WordPressComponentProps<
 		: {} );
 
 export type WordPressComponent<
-	T extends React.ElementType,
+	T extends React.ElementType | null,
 	O,
 	IsPolymorphic extends boolean,
 > = {

package/src/custom-select-control/README.md

@@ -2,12 +2,6 @@
 
 `CustomSelectControl` allows users to select an item from a single-option menu just like [`SelectControl`](/packages/components/src/select-control/readme.md), with the addition of being able to provide custom styles for each item in the menu. This means it does not use a native `<select>`, so should only be used if the custom styling is necessary.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/readme.md#design-guidelines).

package/src/custom-select-control-v2/index.tsx

@@ -18,6 +18,7 @@ import type {
 	CustomSelectItemProps,
 	CustomSelectContext as CustomSelectContextType,
 } from './types';
+import type { WordPressComponentProps } from '../context';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
@@ -41,17 +42,16 @@ function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {
 	return value;
 }
 
-export function CustomSelect( props: CustomSelectProps ) {
-	const {
-		children,
-		defaultValue,
-		label,
-		onChange,
-		size = 'default',
-		value,
-		renderSelectedValue = defaultRenderSelectedValue,
-	} = props;
-
+export function CustomSelect( {
+	children,
+	defaultValue,
+	label,
+	onChange,
+	size = 'default',
+	value,
+	renderSelectedValue = defaultRenderSelectedValue,
+	...props
+}: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
 	const store = Ariakit.useSelectStore( {
 		setValue: ( nextValue ) => onChange?.( nextValue ),
 		defaultValue,
@@ -66,6 +66,7 @@ export function CustomSelect( props: CustomSelectProps ) {
 				{ label }
 			</Styled.CustomSelectLabel>
 			<Styled.CustomSelectButton
+				{ ...props }
 				size={ size }
 				hasCustomRenderProp={ !! renderSelectedValue }
 				store={ store }
@@ -85,7 +86,7 @@ export function CustomSelect( props: CustomSelectProps ) {
 export function CustomSelectItem( {
 	children,
 	...props
-}: CustomSelectItemProps ) {
+}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {
 	const customSelectContext = useContext( CustomSelectContext );
 	return (
 		<Styled.CustomSelectItem

package/src/date-time/date/styles.ts

@@ -84,8 +84,8 @@ export const DayButton = styled( Button, {
 
 	&&& {
 		border-radius: 100%;
-		height: ${ space( 7 ) };
-		width: ${ space( 7 ) };
+		height: ${ space( 8 ) };
+		width: ${ space( 8 ) };
 
 		${ ( props ) =>
 			props.isSelected &&
@@ -108,7 +108,7 @@ export const DayButton = styled( Button, {
 		::before {
 			background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
 			border-radius: 2px;
-			bottom: 0;
+			bottom: 2px;
 			content: " ";
 			height: 4px;
 			left: 50%;