CustomSelect: Add WordPressComponentsProps (#56998)

* CustomSelectControl v2: Add WordPressComponentsProps

* Add WordPressComponentProps as button to CustomSelect

* Update changelog

packages/components/CHANGELOG.md

@@ -29,6 +29,7 @@
 ### Experimental
 
 -   `Tabs`: implement new `tabId` prop ([#56883](https://github.com/WordPress/gutenberg/pull/56883)).
+-   `CustomSelect`: add `WordPressComponentsProps` for more flexibility ([#56998](https://github.com/WordPress/gutenberg/pull/56998))
 
 ### Experimental
 

packages/components/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