Add support for custom popover props to CustomSelect

WordPress · Feb 21, 2024 · 41243b8 · 41243b8
1 parent 1317cb9
commit 41243b8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `CustomSelectControlV2`: Support custom popover props.([#57780](https://github.com/WordPress/gutenberg/pull/57780)).
+
 ## 26.0.1 (2024-02-13)
 
 ### Bug Fix

diff --git a/packages/components/src/custom-select-control-v2/README.md b/packages/components/src/custom-select-control-v2/README.md
@@ -123,6 +123,12 @@ A function that receives the new value of the input.
 
 -   Required: no
 
+##### `popoverProps`: `Object`
+
+Optional props passed to the Ariakit Select Popover.
+
+-   Required: no
+
 ##### `renderSelectedValue`: `( selectValue: string | string[] ) => React.ReactNode`
 
 Can be used to render select UI with custom styled values.

diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -96,10 +96,18 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 		children,
 		hideLabelFromVision = false,
 		label,
+		popoverProps,
 		store,
 		...restProps
 	} = props;
 
+	const selectPopoverProps = {
+		gutter: 12,
+		sameWidth: true,
+		...popoverProps,
+		store,
+	};
+
 	return (
 		<>
 			{ hideLabelFromVision ? ( // TODO: Replace with BaseControl
@@ -110,7 +118,7 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 				</Styled.SelectLabel>
 			) }
 			<CustomSelectButton { ...restProps } store={ store } />
-			<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
+			<Styled.SelectPopover { ...selectPopoverProps }>
 				<CustomSelectContext.Provider value={ { store } }>
 					{ children }
 				</CustomSelectContext.Provider>

diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
@@ -57,6 +57,10 @@ export type _CustomSelectProps = {
 	 * Accessible label for the control.
 	 */
 	label: string;
+	/**
+	 * Optional props passed to the Ariakit Select Popover.
+	 */
+	popoverProps?: Ariakit.SelectPopoverProps;
 };
 
 export type CustomSelectProps = _CustomSelectProps &