@wordpress/components 19.4.1-next.f435e9e01b.0 → 19.6.0

package/src/navigator/test/index.js

@@ -6,7 +6,12 @@ import { render, screen, fireEvent } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { NavigatorProvider, NavigatorScreen, useNavigator } from '../';
+import {
+	NavigatorProvider,
+	NavigatorScreen,
+	NavigatorButton,
+	NavigatorBackButton,
+} from '../';
 
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
@@ -23,58 +28,54 @@ jest.mock( 'framer-motion', () => {
 	};
 } );
 
+const INVALID_HTML_ATTRIBUTE = {
+	raw: ' "\'><=invalid_path',
+	escaped: " &quot;'&gt;<=invalid_path",
+};
+
 const PATHS = {
 	HOME: '/',
 	CHILD: '/child',
 	NESTED: '/child/nested',
+	INVALID_HTML_ATTRIBUTE: INVALID_HTML_ATTRIBUTE.raw,
 	NOT_FOUND: '/not-found',
 };
 
-function NavigatorButton( { path, onClick, ...props } ) {
-	const { goTo } = useNavigator();
+function CustomNavigatorButton( { path, onClick, ...props } ) {
 	return (
-		<button
+		<NavigatorButton
 			onClick={ () => {
-				goTo( path );
-				// Used to spy on the values passed to `navigator.goTo`
+				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
 			} }
+			path={ path }
 			{ ...props }
 		/>
 	);
 }
 
-function NavigatorButtonWithFocusRestoration( { path, onClick, ...props } ) {
-	const { goTo } = useNavigator();
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
+function CustomNavigatorButtonWithFocusRestoration( {
+	path,
+	onClick,
+	...props
+} ) {
 	return (
-		<button
+		<NavigatorButton
 			onClick={ () => {
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } );
-				// Used to spy on the values passed to `navigator.goTo`
+				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
 			} }
-			{ ...buttonProps }
+			path={ path }
+			{ ...props }
 		/>
 	);
 }
 
-function NavigatorBackButton( { onClick, ...props } ) {
-	const { goBack } = useNavigator();
+function CustomNavigatorBackButton( { onClick, ...props } ) {
 	return (
-		<button
+		<NavigatorBackButton
 			onClick={ () => {
-				goBack();
-				// Used to spy on the values passed to `navigator.goBack`
+				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );
 			} }
 			{ ...props }
@@ -89,41 +90,54 @@ const MyNavigation = ( {
 	<NavigatorProvider initialPath={ initialPath }>
 		<NavigatorScreen path={ PATHS.HOME }>
 			<p>This is the home screen.</p>
-			<NavigatorButton
+			<CustomNavigatorButton
 				path={ PATHS.NOT_FOUND }
 				onClick={ onNavigatorButtonClick }
 			>
 				Navigate to non-existing screen.
-			</NavigatorButton>
-			<NavigatorButtonWithFocusRestoration
+			</CustomNavigatorButton>
+			<CustomNavigatorButton
 				path={ PATHS.CHILD }
 				onClick={ onNavigatorButtonClick }
 			>
 				Navigate to child screen.
-			</NavigatorButtonWithFocusRestoration>
+			</CustomNavigatorButton>
+			<CustomNavigatorButton
+				path={ PATHS.INVALID_HTML_ATTRIBUTE }
+				onClick={ onNavigatorButtonClick }
+			>
+				Navigate to screen with an invalid HTML value as a path.
+			</CustomNavigatorButton>
 		</NavigatorScreen>
 
 		<NavigatorScreen path={ PATHS.CHILD }>
 			<p>This is the child screen.</p>
-			<NavigatorButtonWithFocusRestoration
+			<CustomNavigatorButtonWithFocusRestoration
 				path={ PATHS.NESTED }
 				onClick={ onNavigatorButtonClick }
 			>
 				Navigate to nested screen.
-			</NavigatorButtonWithFocusRestoration>
-			<NavigatorBackButton onClick={ onNavigatorButtonClick }>
+			</CustomNavigatorButtonWithFocusRestoration>
+			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
 				Go back
-			</NavigatorBackButton>
+			</CustomNavigatorBackButton>
 		</NavigatorScreen>
 
 		<NavigatorScreen path={ PATHS.NESTED }>
 			<p>This is the nested screen.</p>
-			<NavigatorBackButton onClick={ onNavigatorButtonClick }>
+			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
 				Go back
-			</NavigatorBackButton>
+			</CustomNavigatorBackButton>
 		</NavigatorScreen>
 
-		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included */ }
+		<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+			<p>This is the screen with an invalid HTML value as a path.</p>
+			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
+				Go back
+			</CustomNavigatorBackButton>
+		</NavigatorScreen>
+
+		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
 	</NavigatorProvider>
 );
 
@@ -143,6 +157,13 @@ const getNestedScreen = ( { throwIfNotFound } = {} ) =>
 	getNavigationScreenByText( 'This is the nested screen.', {
 		throwIfNotFound,
 	} );
+const getInvalidHTMLPathScreen = ( { throwIfNotFound } = {} ) =>
+	getNavigationScreenByText(
+		'This is the screen with an invalid HTML value as a path.',
+		{
+			throwIfNotFound,
+		}
+	);
 
 const getNavigationButtonByText = ( text, { throwIfNotFound = true } = {} ) => {
 	const fnName = throwIfNotFound ? 'getByRole' : 'queryByRole';
@@ -160,6 +181,13 @@ const getToNestedScreenButton = ( { throwIfNotFound } = {} ) =>
 	getNavigationButtonByText( 'Navigate to nested screen.', {
 		throwIfNotFound,
 	} );
+const getToInvalidHTMLPathScreenButton = ( { throwIfNotFound } = {} ) =>
+	getNavigationButtonByText(
+		'Navigate to screen with an invalid HTML value as a path.',
+		{
+			throwIfNotFound,
+		}
+	);
 const getBackButton = ( { throwIfNotFound } = {} ) =>
 	getNavigationButtonByText( 'Go back', {
 		throwIfNotFound,
@@ -234,43 +262,42 @@ describe( 'Navigator', () => {
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
-		// Navigate to child screen
+		// Navigate to child screen.
 		fireEvent.click( getToChildScreenButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getBackButton() ).toBeInTheDocument();
 
-		// Navigate back to home screen
+		// Navigate back to home screen.
 		fireEvent.click( getBackButton() );
-
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
-		// Navigate again to child screen
+		// Navigate again to child screen.
 		fireEvent.click( getToChildScreenButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getToNestedScreenButton() ).toBeInTheDocument();
 
-		// Navigate to nested screen
+		// Navigate to nested screen.
 		fireEvent.click( getToNestedScreenButton() );
 
 		expect( getNestedScreen() ).toBeInTheDocument();
 		expect( getBackButton() ).toBeInTheDocument();
 
-		// Navigate back to child screen
+		// Navigate back to child screen.
 		fireEvent.click( getBackButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getToNestedScreenButton() ).toBeInTheDocument();
 
-		// Navigate back to home screen
+		// Navigate back to home screen.
 		fireEvent.click( getBackButton() );
 
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toBeInTheDocument();
 
-		// Check the values passed to `navigator.goTo()`
+		// Check the values passed to `navigator.goTo()`.
 		expect( spy ).toHaveBeenCalledTimes( 6 );
 		expect( spy ).toHaveBeenNthCalledWith( 1, {
 			path: PATHS.CHILD,
@@ -315,7 +342,7 @@ describe( 'Navigator', () => {
 			getNestedScreen( { throwIfNotFound: false } )
 		).not.toBeInTheDocument();
 
-		// Check the values passed to `navigator.goTo()`
+		// Check the values passed to `navigator.goTo()`.
 		expect( spy ).toHaveBeenCalledTimes( 1 );
 		expect( spy ).toHaveBeenNthCalledWith( 1, {
 			path: PATHS.NOT_FOUND,
@@ -328,26 +355,53 @@ describe( 'Navigator', () => {
 
 		expect( getHomeScreen() ).toBeInTheDocument();
 
-		// Navigate to child screen
+		// Navigate to child screen.
 		fireEvent.click( getToChildScreenButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 
-		// Navigate to nested screen
+		// Navigate to nested screen.
 		fireEvent.click( getToNestedScreenButton() );
 
 		expect( getNestedScreen() ).toBeInTheDocument();
 
-		// Navigate back to child screen, check that focus was correctly restored
+		// Navigate back to child screen, check that focus was correctly restored.
 		fireEvent.click( getBackButton() );
 
 		expect( getChildScreen() ).toBeInTheDocument();
 		expect( getToNestedScreenButton() ).toHaveFocus();
 
-		// Navigate back to home screen, check that focus was correctly restored
+		// Navigate back to home screen, check that focus was correctly restored.
 		fireEvent.click( getBackButton() );
 
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toHaveFocus();
 	} );
+
+	it( 'should escape the value of the `path` prop', () => {
+		render( <MyNavigation /> );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect( getToInvalidHTMLPathScreenButton() ).toBeInTheDocument();
+
+		// The following line tests the implementation details, but it's necessary
+		// as this would be otherwise transparent to the user.
+		expect( getToInvalidHTMLPathScreenButton() ).toHaveAttribute(
+			'id',
+			INVALID_HTML_ATTRIBUTE.escaped
+		);
+
+		// Navigate to screen with an invalid HTML value for its `path`.
+		fireEvent.click( getToInvalidHTMLPathScreenButton() );
+
+		expect( getInvalidHTMLPathScreen() ).toBeInTheDocument();
+		expect( getBackButton() ).toBeInTheDocument();
+
+		// Navigate back to home screen, check that the focus restoration selector
+		// worked correctly despite the escaping.
+		fireEvent.click( getBackButton() );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect( getToInvalidHTMLPathScreenButton() ).toHaveFocus();
+	} );
 } );

package/src/navigator/types.ts

@@ -19,7 +19,7 @@ export type NavigatorContext = {
 	goBack: () => void;
 };
 
-// Returned by the `useNavigator` hook
+// Returned by the `useNavigator` hook.
 export type Navigator = NavigatorContext;
 
 export type NavigatorProviderProps = {
@@ -43,3 +43,29 @@ export type NavigatorScreenProps = {
 	 */
 	children: ReactNode;
 };
+
+type ButtonProps = {
+	// TODO: should also extend `Button` prop types once the `Button` component
+	// is refactored to TypeScript.
+};
+export type NavigatorBackButtonProps = Omit< ButtonProps, 'href' > & {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+};
+
+export type NavigatorButtonProps = NavigatorBackButtonProps & {
+	/**
+	 * The path of the screen to navigate to. The value of this prop needs to be
+	 * a valid value for an HTML attribute.
+	 */
+	path: string;
+	/**
+	 * The HTML attribute used to identify the `NavigatorButton`, which is used
+	 * by `Navigator` to restore focus.
+	 *
+	 * @default 'id'
+	 */
+	attributeName?: string;
+};

package/src/number-control/index.js

@@ -43,7 +43,7 @@ export function NumberControl(
 	const baseStep = isStepAny ? 1 : parseFloat( step );
 	const baseValue = roundClamp( 0, min, max, baseStep );
 	const constrainValue = ( value, stepOverride ) => {
-		// When step is "any" clamp the value, otherwise round and clamp it
+		// When step is "any" clamp the value, otherwise round and clamp it.
 		return isStepAny
 			? Math.min( max, Math.max( min, value ) )
 			: roundClamp( value, min, max, stepOverride ?? baseStep );

package/src/number-control/stories/index.js

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import NumberControl from '../';
 
 export default {
-	title: 'Components/NumberControl',
+	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
 	parameters: {
 		knobs: { disable: false },

package/src/panel/body.js

@@ -48,10 +48,10 @@ export function PanelBody(
 		onToggle( next );
 	};
 
-	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value
+	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
 	const scrollAfterOpenRef = useRef();
 	scrollAfterOpenRef.current = scrollAfterOpen;
-	// Runs after initial render
+	// Runs after initial render.
 	useUpdateEffect( () => {
 		if (
 			isOpened &&

package/src/popover/index.js

@@ -79,7 +79,7 @@ function computeAnchorRect(
 
 		// Duck-type to check if `anchorRef` is an instance of Range
 		// `anchorRef instanceof window.Range` checks will break across document boundaries
-		// such as in an iframe
+		// such as in an iframe.
 		if ( typeof anchorRef?.cloneRange === 'function' ) {
 			return offsetIframe(
 				getRectangleFromRange( anchorRef ),
@@ -90,7 +90,7 @@ function computeAnchorRect(
 
 		// Duck-type to check if `anchorRef` is an instance of Element
 		// `anchorRef instanceof window.Element` checks will break across document boundaries
-		// such as in an iframe
+		// such as in an iframe.
 		if ( typeof anchorRef?.getBoundingClientRect === 'function' ) {
 			const rect = offsetIframe(
 				anchorRef.getBoundingClientRect(),
@@ -389,7 +389,7 @@ const Popover = (
 				typeof contentWidth === 'number' ? contentWidth + 'px' : ''
 			);
 
-			// Compute the animation position
+			// Compute the animation position.
 			const yAxisMapping = {
 				top: 'bottom',
 				bottom: 'top',

package/src/popover/utils.js

@@ -7,7 +7,7 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Module constants
  */
-const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
+const HEIGHT_OFFSET = 10; // Used by the arrow and a bit of empty space.
 
 /**
  * Utility used to compute the popover position over the xAxis
@@ -39,7 +39,7 @@ export function computePopoverXAxisPosition(
 ) {
 	const { width } = contentSize;
 
-	// Correct xAxis for RTL support
+	// Correct xAxis for RTL support.
 	if ( xAxis === 'left' && isRTL() ) {
 		xAxis = 'right';
 	} else if ( xAxis === 'right' && isRTL() ) {
@@ -52,7 +52,7 @@ export function computePopoverXAxisPosition(
 		corner = 'left';
 	}
 
-	// x axis alignment choices
+	// X axis alignment choices.
 	const anchorMidPoint = Math.round( anchorRect.left + anchorRect.width / 2 );
 	const centerAlignment = {
 		popoverLeft: anchorMidPoint,
@@ -91,7 +91,7 @@ export function computePopoverXAxisPosition(
 				: width,
 	};
 
-	// Choosing the x axis
+	// Choosing the x axis.
 	let chosenXAxis = xAxis;
 	let contentWidth = null;
 
@@ -228,7 +228,7 @@ export function computePopoverYAxisPosition(
 		}
 	}
 
-	// y axis alignment choices
+	// Y axis alignment choices.
 	let anchorMidPoint = anchorRect.top + anchorRect.height / 2;
 
 	if ( corner === 'bottom' ) {
@@ -261,7 +261,7 @@ export function computePopoverYAxisPosition(
 				: height,
 	};
 
-	// Choosing the y axis
+	// Choosing the y axis.
 	let chosenYAxis = yAxis;
 	let contentHeight = null;
 

package/src/radio/stories/index.js

@@ -4,7 +4,7 @@
 import RadioGroup from '../../radio-group';
 import Radio from '../';
 
-export default { title: 'Components/Radio', component: Radio };
+export default { title: 'Components (Experimental)/Radio', component: Radio };
 
 export const _default = () => {
 	// Radio components must be a descendent of a RadioGroup component.

package/src/radio-group/index.js

@@ -25,7 +25,7 @@ function RadioGroup(
 	const radioContext = {
 		...radioState,
 		disabled,
-		// controlled or uncontrolled
+		// Controlled or uncontrolled.
 		state: checked ?? radioState.state,
 		setState: onChange ?? radioState.setState,
 	};

package/src/radio-group/stories/index.js

@@ -9,7 +9,10 @@ import { useState } from '@wordpress/element';
 import Radio from '../../radio';
 import RadioGroup from '../';
 
-export default { title: 'Components/RadioGroup', component: RadioGroup };
+export default {
+	title: 'Components (Experimental)/RadioGroup',
+	component: RadioGroup,
+};
 
 export const _default = () => {
 	/* eslint-disable no-restricted-syntax */

package/src/range-control/stories/index.js

@@ -164,7 +164,7 @@ export const marks = () => {
 	const minNegative = { min: -10, max: 10, step: 1 };
 	const rangeNegative = { min: -10, max: -1, step: 1 };
 
-	// use a short alias to keep formatting to fewer lines
+	// Use a short alias to keep formatting to fewer lines.
 	const Range = RangeControlLabeledByMarksType;
 
 	return (

package/src/range-control/styles/range-control-styles.js

@@ -292,7 +292,7 @@ export const Tooltip = styled.span`
 `;
 
 // @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack
+// @wordpress/components/ui/hstack.
 export const InputNumber = styled( NumberControl )`
 	box-sizing: border-box;
 	display: inline-block;

package/src/range-control/test/index.js

@@ -266,9 +266,9 @@ describe( 'RangeControl', () => {
 			fireEvent.change( numberInput, { target: { value: '' } } );
 			fireEvent.blur( numberInput );
 
-			// Reset to 50. Median value of min: 0, max: 100
+			// Reset to 50. Median value of min: 0, max: 100.
 			expect( rangeInput.value ).toBe( '50' );
-			// Input field should be blank
+			// Input field should be blank.
 			expect( numberInput.value ).toBe( '' );
 		} );
 	} );

package/src/resizable-box/index.tsx

@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-import type { ReactNode, Ref } from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -104,7 +104,7 @@ function ResizableBox(
 		__experimentalTooltipProps: tooltipProps = {},
 		...props
 	}: ResizableBoxProps,
-	ref: Ref< Resizable >
+	ref: ForwardedRef< Resizable >
 ): JSX.Element {
 	return (
 		<Resizable

package/src/resizable-box/resize-tooltip/index.tsx

@@ -3,7 +3,7 @@
  */
 import { noop } from 'lodash';
 import classnames from 'classnames';
-import type { Ref } from 'react';
+import type { Ref, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -43,7 +43,7 @@ function ResizeTooltip(
 		zIndex = 1000,
 		...props
 	}: ResizeTooltipProps,
-	ref: Ref< HTMLDivElement >
+	ref: ForwardedRef< HTMLDivElement >
 ): JSX.Element | null {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,

package/src/resizable-box/resize-tooltip/label.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -33,7 +33,7 @@ type LabelProps = React.DetailedHTMLProps<
 
 function Label(
 	{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,
-	ref: Ref< HTMLDivElement >
+	ref: ForwardedRef< HTMLDivElement >
 ): JSX.Element | null {
 	const showLabel = !! label;
 

package/src/sandbox/index.js

@@ -126,7 +126,7 @@ export default function Sandbox( {
 			return;
 		}
 
-		// put the html snippet into a html document, and then write it to the iframe's document
+		// Put the html snippet into a html document, and then write it to the iframe's document
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram
 		// that expect the scripts to be part of the body.
@@ -163,9 +163,9 @@ export default function Sandbox( {
 			</html>
 		);
 
-		// writing the document like this makes it act in the same way as if it was
+		// Writing the document like this makes it act in the same way as if it was
 		// loaded over the network, so DOM creation and mutation, script execution, etc.
-		// all work as expected
+		// all work as expected.
 		contentDocument.open();
 		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
 		contentDocument.close();
@@ -181,12 +181,12 @@ export default function Sandbox( {
 		function checkMessageForResize( event ) {
 			const iframe = ref.current;
 
-			// Verify that the mounted element is the source of the message
+			// Verify that the mounted element is the source of the message.
 			if ( ! iframe || iframe.contentWindow !== event.source ) {
 				return;
 			}
 
-			// Attempt to parse the message data as JSON if passed as string
+			// Attempt to parse the message data as JSON if passed as string.
 			let data = event.data || {};
 
 			if ( 'string' === typeof data ) {

package/src/sandbox/index.native.js

@@ -241,7 +241,7 @@ function Sandbox( {
 	}
 
 	function checkMessageForResize( event ) {
-		// Attempt to parse the message data as JSON if passed as string
+		// Attempt to parse the message data as JSON if passed as string.
 		let data = event.nativeEvent.data || {};
 
 		if ( 'string' === typeof data ) {

package/src/scrollable/component.js

@@ -7,7 +7,7 @@ import { useScrollable } from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function Scrollable( props, forwardedRef ) {
 	const scrollableProps = useScrollable( props );

package/src/select-control/index.tsx

@@ -3,8 +3,7 @@
  */
 import { isEmpty, noop } from 'lodash';
 import classNames from 'classnames';
-// eslint-disable-next-line no-restricted-imports
-import type { ChangeEvent, FocusEvent, ReactNode, Ref } from 'react';
+import type { ChangeEvent, FocusEvent, ReactNode, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -74,13 +73,13 @@ function SelectControl(
 		suffix,
 		...props
 	}: WordPressComponentProps< SelectControlProps, 'select', false >,
-	ref: Ref< HTMLSelectElement >
+	ref: ForwardedRef< HTMLSelectElement >
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
 
-	// Disable reason: A select with an onchange throws a warning
+	// Disable reason: A select with an onchange throws a warning.
 	if ( isEmpty( options ) && ! children ) return null;
 
 	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {

package/src/select-control/styles/select-control-styles.ts

@@ -98,6 +98,7 @@ export const Select = styled.select< SelectProps >`
 		box-shadow: none !important;
 		color: ${ COLORS.black };
 		display: block;
+		font-family: inherit;
 		margin: 0;
 		width: 100%;