Extend v2 CustomSelect

We need a means of ensuring that the select popover has sufficient z-index to render above controls below it in the inspector. Additionally, we want to be able to avoid visually rendering the select's label.
WordPress · Jan 3, 2024 · f566747 · f566747
1 parent 971266d
commit f566747
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx
@@ -19,6 +19,7 @@ import type {
 	CustomSelectContext as CustomSelectContextType,
 } from './types';
 import type { WordPressComponentProps } from '../context';
+import { VisuallyHidden } from '../visually-hidden';
 
 export const CustomSelectContext =
 	createContext< CustomSelectContextType >( undefined );
@@ -45,11 +46,13 @@ function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {
 export function CustomSelect( {
 	children,
 	defaultValue,
+	hideLabelFromVision = false,
 	label,
 	onChange,
 	size = 'default',
 	value,
 	renderSelectedValue = defaultRenderSelectedValue,
+	popoverProps,
 	...props
 }: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
 	const store = Ariakit.useSelectStore( {
@@ -59,12 +62,23 @@ export function CustomSelect( {
 	} );
 
 	const { value: currentValue } = store.useState();
+	const selectPopoverProps = {
+		gutter: 12,
+		sameWidth: true,
+		...popoverProps,
+		store,
+	};
 
 	return (
 		<>
-			<Styled.CustomSelectLabel store={ store }>
-				{ label }
-			</Styled.CustomSelectLabel>
+			{ hideLabelFromVision && (
+				<VisuallyHidden as="label">{ label }</VisuallyHidden>
+			) }
+			{ ! hideLabelFromVision && (
+				<Styled.CustomSelectLabel store={ store }>
+					{ label }
+				</Styled.CustomSelectLabel>
+			) }
 			<Styled.CustomSelectButton
 				{ ...props }
 				size={ size }
@@ -74,7 +88,7 @@ export function CustomSelect( {
 				{ renderSelectedValue( currentValue ) }
 				<Ariakit.SelectArrow />
 			</Styled.CustomSelectButton>
-			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>
+			<Styled.CustomSelectPopover { ...selectPopoverProps }>
 				<CustomSelectContext.Provider value={ { store } }>
 					{ children }
 				</CustomSelectContext.Provider>

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -63,6 +63,8 @@ export const CustomSelectPopover = styled( Ariakit.SelectPopover )`
 	border-radius: ${ space( 0.5 ) };
 	background: ${ COLORS.white };
 	border: 1px solid ${ COLORS.gray[ 900 ] };
+	/* Force the passed wrapper props z-index otherwise it's overridden. */
+	z-index: ${ ( props ) => props.wrapperProps?.style?.zIndex };
 `;
 
 export const CustomSelectItem = styled( Ariakit.SelectItem )`

diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
@@ -23,6 +23,12 @@ export type CustomSelectProps = {
 	 * non-disabled item will be used.
 	 */
 	defaultValue?: string | string[];
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
 	/**
 	 * Label for the control.
 	 */
@@ -31,6 +37,10 @@ export type CustomSelectProps = {
 	 * A function that receives the new value of the input.
 	 */
 	onChange?: ( newValue: string | string[] ) => void;
+	/**
+	 * Optional props passed to the Select Popover.
+	 */
+	popoverProps?: Ariakit.SelectPopoverProps;
 	/**
 	 * Can be used to render select UI with custom styled values.
 	 */