@wordpress/components 28.3.0 → 28.5.0

package/src/font-size-picker/test/index.tsx

@@ -1,14 +1,38 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
  */
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const ControlledFontSizePicker = ( {
+	onChange,
+	...props
+}: React.ComponentProps< typeof FontSizePicker > ) => {
+	const [ fontSize, setFontSize ] =
+		useState< typeof props.value >( undefined );
+
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ ( newFontSize ) => {
+				setFontSize( newFontSize );
+				onChange?.( newFontSize );
+			} }
+		/>
+	);
+};
 
 describe( 'FontSizePicker', () => {
 	test.each( [
@@ -21,7 +45,9 @@ describe( 'FontSizePicker', () => {
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render( <FontSizePicker value={ value } onChange={ onChange } /> );
+			await render(
+				<FontSizePicker value={ value } onChange={ onChange } />
+			);
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
 			await user.type( input, '80' );
@@ -40,7 +66,7 @@ describe( 'FontSizePicker', () => {
 		async ( { firstFontSize, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
@@ -92,7 +118,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
@@ -114,13 +140,11 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
@@ -140,7 +164,7 @@ describe( 'FontSizePicker', () => {
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ value }
@@ -198,7 +222,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
@@ -220,8 +244,8 @@ describe( 'FontSizePicker', () => {
 			{ value: '8px', option: 'Tiny' },
 		] )(
 			'defaults to $option when value is $value',
-			( { value, option } ) => {
-				render(
+			async ( { value, option } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
@@ -239,13 +263,11 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
@@ -283,7 +305,7 @@ describe( 'FontSizePicker', () => {
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ value }
@@ -334,8 +356,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+		it( 'displays a toggle group control with t-shirt sizes', async () => {
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -356,20 +378,18 @@ describe( 'FontSizePicker', () => {
 			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
@@ -405,8 +425,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+		it( 'displays a toggle group control with t-shirt sizes', async () => {
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 4 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -430,13 +450,11 @@ describe( 'FontSizePicker', () => {
 			},
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
+			async ( { value, expectedLabel } ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
@@ -456,7 +474,7 @@ describe( 'FontSizePicker', () => {
 			async ( { radio, expectedArguments } ) => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						onChange={ onChange }
@@ -475,8 +493,8 @@ describe( 'FontSizePicker', () => {
 	} );
 
 	function commonToggleGroupTests( fontSizes: FontSize[] ) {
-		it( 'defaults to M when value is 16px', () => {
-			render(
+		it( 'defaults to M when value is 16px', async () => {
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -489,11 +507,11 @@ describe( 'FontSizePicker', () => {
 
 		test.each( [ undefined, '' ] )(
 			'has no selection when value is %p',
-			( value ) => {
-				render(
+			async ( value ) => {
+				await render(
 					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument();
+				expect( screen.getByRole( 'radiogroup' ) ).toBeVisible();
 				expect(
 					screen.queryByRole( 'radio', { checked: true } )
 				).not.toBeInTheDocument();
@@ -505,7 +523,7 @@ describe( 'FontSizePicker', () => {
 		it( 'shows custom input when Custom is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
@@ -514,21 +532,56 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'option', { name: 'Custom' } )
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
 			expect( onChange ).not.toHaveBeenCalled();
 		} );
 	}
 
 	function commonTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when value is unknown', () => {
-			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
-			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+		it( 'shows custom input when value is unknown', async () => {
+			await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+		} );
+
+		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
+			const { rerender } = await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+
+			rerender(
+				<FontSizePicker
+					disableCustomFontSizes
+					fontSizes={ fontSizes }
+					value="3px"
+				/>
+			);
+			expect(
+				screen.queryByLabelText( 'Custom' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( "doesn't hide custom input when the selected font size is a predef", async () => {
+			const { rerender } = await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+
+			rerender(
+				<FontSizePicker
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+				/>
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
 		} );
 
 		it( 'allows custom values by default', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
@@ -539,8 +592,30 @@ describe( 'FontSizePicker', () => {
 			expect( onChange ).toHaveBeenCalledWith( '80px' );
 		} );
 
-		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
-			render(
+		it( 'allows switching between custom and predef inputs when pressing the dedicated toggle', async () => {
+			const user = userEvent.setup();
+
+			await render(
+				<ControlledFontSizePicker fontSizes={ fontSizes } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+
+			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Use size preset' } )
+			);
+
+			expect(
+				screen.queryByLabelText( 'Custom' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'does not allow custom values when disableCustomFontSizes is set', async () => {
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
@@ -553,7 +628,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not display a slider by default', async () => {
 			const user = userEvent.setup();
-			render( <FontSizePicker fontSizes={ fontSizes } /> );
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -565,7 +640,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows a slider to be used when withSlider is set', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					withSlider
@@ -586,7 +661,7 @@ describe( 'FontSizePicker', () => {
 		it( 'allows reset by default', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -603,7 +678,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not allow reset when withReset is false', async () => {
 			const user = userEvent.setup();
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
@@ -621,7 +696,7 @@ describe( 'FontSizePicker', () => {
 		it( 'applies custom units to custom font size control', async () => {
 			const user = userEvent.setup();
 
-			render(
+			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }

package/src/font-size-picker/types.ts

@@ -29,7 +29,7 @@ export type FontSizePickerProps = {
 	/**
 	 * Available units for custom font size selection.
 	 *
-	 * @default `[ 'px', 'em', 'rem' ]`
+	 * @default [ 'px', 'em', 'rem', 'vw', 'vh' ]
 	 */
 	units?: string[];
 	/**
@@ -37,8 +37,9 @@ export type FontSizePickerProps = {
 	 */
 	value?: number | string;
 	/**
-	 * If `true`, the UI will contain a slider, instead of a numeric text input
-	 * field. If `false`, no slider will be present.
+	 * If `true`, a slider will be displayed alongside the input field when a
+	 * custom font size is active. Has no effect when `disableCustomFontSizes`
+	 * is `true`.
 	 *
 	 * @default false
 	 */
@@ -46,7 +47,7 @@ export type FontSizePickerProps = {
 	/**
 	 * If `true`, a reset button will be displayed alongside the input field
 	 * when a custom font size is active. Has no effect when
-	 * `disableCustomFontSizes` or `withSlider` is `true`.
+	 * `disableCustomFontSizes` is `true`.
 	 *
 	 * @default true
 	 */
@@ -110,7 +111,7 @@ export type FontSizePickerSelectOption = {
 	key: string;
 	name: string;
 	value?: FontSize[ 'size' ];
-	__experimentalHint?: string;
+	hint?: string;
 };
 
 export type FontSizePickerToggleGroupProps = Pick<

package/src/form-toggle/index.tsx

@@ -17,26 +17,7 @@ import type { WordPressComponentProps } from '../context';
 
 export const noop = () => {};
 
-/**
- * FormToggle switches a single setting on or off.
- *
- * ```jsx
- * import { FormToggle } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyFormToggle = () => {
- *   const [ isChecked, setChecked ] = useState( true );
- *
- *   return (
- *     <FormToggle
- *       checked={ isChecked }
- *       onChange={ () => setChecked( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function FormToggle(
+function UnforwardedFormToggle(
 	props: WordPressComponentProps< FormToggleProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
@@ -71,4 +52,25 @@ export function FormToggle(
 	);
 }
 
-export default forwardRef( FormToggle );
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const FormToggle = forwardRef( UnforwardedFormToggle );
+
+export default FormToggle;

package/src/form-toggle/style.scss

@@ -1,15 +1,16 @@
 @use "sass:math";
 
-$toggle-width: 36px;
-$toggle-height: 18px;
+$toggle-width: $grid-unit-40;
+$toggle-height: $grid-unit-20;
 $toggle-border-width: 1px;
-$thumb-size:  $toggle-height - ($toggle-border-width * 6);
+$toggle-thumb-size:  $grid-unit-15;
 
 $transition-duration: 0.2s;
 
 .components-form-toggle {
 	position: relative;
 	display: inline-block;
+	height: $toggle-height;
 
 	// Unchecked state.
 	.components-form-toggle__track {
@@ -19,7 +20,7 @@ $transition-duration: 0.2s;
 		box-sizing: border-box;
 		vertical-align: top;
 		background-color: $white;
-		border: $toggle-border-width solid $gray-900;
+		border: $toggle-border-width solid $gray-600;
 		width: $toggle-width;
 		height: $toggle-height;
 		border-radius: math.div($toggle-height, 2);
@@ -49,10 +50,10 @@ $transition-duration: 0.2s;
 		display: block;
 		position: absolute;
 		box-sizing: border-box;
-		top: $toggle-border-width * 3;
-		left: $toggle-border-width * 3;
-		width: $thumb-size;
-		height: $thumb-size;
+		top: math.div($toggle-thumb-size, 6);
+		left: math.div($toggle-thumb-size, 6);
+		width: $toggle-thumb-size;
+		height: $toggle-thumb-size;
 		border-radius: 50%;
 		transition:
 			$transition-duration transform ease,
@@ -61,7 +62,7 @@ $transition-duration: 0.2s;
 		background-color: $gray-900;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
-		border: math.div($thumb-size, 2) solid transparent;
+		border: math.div($toggle-thumb-size, 2) solid transparent;
 	}
 
 	// Checked state.
@@ -116,4 +117,8 @@ $transition-duration: 0.2s;
 	&::before {
 		content: "";
 	}
+
+	&:not(:disabled, [aria-disabled="true"]) {
+		cursor: pointer;
+	}
 }

package/src/form-token-field/README.md

@@ -61,7 +61,7 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
--   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.5. (The prop can be safely removed once this happens.)
+-   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
 -   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
@@ -87,6 +87,7 @@ const MyFormTokenField = () => {
 			value={ selectedContinents }
 			suggestions={ continents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+			__nextHasNoMarginBottom
 		/>
 	);
 };

package/src/form-token-field/index.tsx

@@ -12,6 +12,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -77,6 +78,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		tokenizeOnBlur = false,
 	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.FormTokenField', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	const instanceId = useInstanceId( FormTokenField );
 
 	// We reset to these initial values again in the onBlur

package/src/form-token-field/stories/index.story.tsx

@@ -62,6 +62,7 @@ export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
+	__nextHasNoMarginBottom: true,
 };
 
 export const Async: StoryFn< typeof FormTokenField > = ( {
@@ -99,6 +100,7 @@ export const Async: StoryFn< typeof FormTokenField > = ( {
 Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
+	__nextHasNoMarginBottom: true,
 };
 
 export const DropdownSelector: StoryFn< typeof FormTokenField > =

package/src/guide/index.tsx

@@ -144,6 +144,7 @@ function Guide( {
 							className="components-guide__back-button"
 							variant="tertiary"
 							onClick={ goBack }
+							__next40pxDefaultSize
 						>
 							{ __( 'Previous' ) }
 						</Button>
@@ -153,6 +154,7 @@ function Guide( {
 							className="components-guide__forward-button"
 							variant="primary"
 							onClick={ goForward }
+							__next40pxDefaultSize
 						>
 							{ __( 'Next' ) }
 						</Button>

package/src/heading/types.ts

@@ -17,10 +17,7 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit<
-	TextProps,
-	'size' | 'isBlock' | 'color' | 'weight'
-> & {
+export type HeadingProps = Omit< TextProps, 'isBlock' | 'color' | 'weight' > & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to

package/src/higher-order/navigate-regions/style.scss

@@ -1,19 +1,7 @@
-// Allow the position to be easily overridden to e.g. fixed.
-
-@mixin region-selection-outline {
-	outline: 4px solid $components-color-accent;
-	outline-offset: -4px;
-}
+$regionOutlineRatio: 2;
 
 @mixin region-selection-focus {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	content: "";
-	pointer-events: none;
-	@include region-selection-outline;
+	@include selected-block-focus( $regionOutlineRatio );
 	z-index: z-index(".is-focusing-regions {region} :focus::after");
 }
 
@@ -46,6 +34,6 @@
 	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
 	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
-		@include region-selection-outline;
+		@include selected-block-outline( $regionOutlineRatio );
 	}
 }

package/src/index.ts

@@ -63,7 +63,7 @@ export {
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
-export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
+export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as __experimentalDimensionControl } from './dimension-control';

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -65,7 +65,7 @@ const BottomSheetNavigationScreen = ( {
 			 * passed to useCallback here is what prevents erroneous callback
 			 * replacements, but leveraging memoization to achieve this is brittle and
 			 * explicitly discouraged in the React documentation.
-			 * https://reactjs.org/docs/hooks-reference.html#usememo
+			 * https://react.dev/reference/react/useMemo
 			 *
 			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
 			 * callbacks triggered based upon which screen is currently active.