@wordpress/components 21.1.0 → 21.2.0

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

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type FontSizePickerProps = {
+	/**
+	 * If `true`, it will not be possible to choose a custom fontSize. The user
+	 * will be forced to pick one of the pre-defined sizes passed in fontSizes.
+	 *
+	 * @default false
+	 */
+	disableCustomFontSizes?: boolean;
+	/**
+	 * If no value exists, this prop defines the starting position for the font
+	 * size picker slider. Only relevant if `withSlider` is `true`.
+	 */
+	fallbackFontSize?: number;
+	/**
+	 * An array of font size objects. The object should contain properties size,
+	 * name, and slug.
+	 */
+	fontSizes?: FontSize[];
+	/**
+	 * A function that receives the new font size value.
+	 * If onChange is called without any parameter, it should reset the value,
+	 * attending to what reset means in that context, e.g., set the font size to
+	 * undefined or set the font size a starting value.
+	 */
+	onChange?: ( value: number | string | undefined ) => void;
+	/**
+	 * The current font size value.
+	 */
+	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.
+	 *
+	 * @default false
+	 */
+	withSlider?: boolean;
+	/**
+	 * 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`.
+	 *
+	 * @default true
+	 */
+	withReset?: boolean;
+	/**
+	 * Start opting into the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Size of the control.
+	 *
+	 * @default default
+	 */
+	size?: 'default' | '__unstable-large';
+};
+
+export type FontSize = {
+	/**
+	 * The property `size` contains a number with the font size value, in `px` or
+	 * a string specifying the font size CSS property that should be used eg:
+	 * "13px", "1em", or "clamp(12px, 5vw, 100px)".
+	 */
+	size: number | string;
+	/**
+	 * The `name` property includes a label for that font size e.g.: `Small`.
+	 */
+	name?: string;
+	/**
+	 * The `slug` property is a string with a unique identifier for the font
+	 * size. Used for the class generation process.
+	 */
+	slug: string;
+};
+
+export type FontSizeOption = Omit< FontSize, 'size' > &
+	Partial< Pick< FontSize, 'size' > >;
+
+export type FontSizeSelectOption = Pick< FontSizeOption, 'size' > & {
+	key: string;
+	name?: string;
+	__experimentalHint: ReactNode;
+};
+
+export type FontSizeToggleGroupOption = {
+	key: string;
+	value: number | string;
+	label: string;
+	name: string;
+};

package/src/font-size-picker/{utils.js → utils.ts}

@@ -3,6 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import type {
+	FontSize,
+	FontSizeOption,
+	FontSizeSelectOption,
+	FontSizeToggleGroupOption,
+	FontSizePickerProps,
+} from './types';
+
 const DEFAULT_FONT_SIZE = 'default';
 const DEFAULT_FONT_SIZE_OPTION = {
 	slug: DEFAULT_FONT_SIZE,
@@ -36,13 +47,18 @@ const FONT_SIZES_ALIASES = [
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
  *
- * @param {string|number} size Font size.
- * @return {[number, string]} An array with the numeric value and the unit if exists.
+ * @param  size Font size.
+ * @return An array with the numeric value and the unit if exists.
  */
-export function splitValueAndUnitFromSize( size ) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g );
+export function splitValueAndUnitFromSize(
+	size: NonNullable< FontSizePickerProps[ 'value' ] >
+) {
+	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
 
-	if ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {
+	if (
+		! isNaN( parseFloat( numericValue ) ) &&
+		isFinite( Number( numericValue ) )
+	) {
 		return [ numericValue, unit ];
 	}
 
@@ -53,28 +69,30 @@ export function splitValueAndUnitFromSize( size ) {
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
  *
- * @param {string|number} value The value that is checked.
- * @return {boolean} Whether the value is a simple css value.
+ * @param  value The value that is checked.
+ * @return Whether the value is a simple css value.
  */
-export function isSimpleCssValue( value ) {
+export function isSimpleCssValue(
+	value: NonNullable< FontSizePickerProps[ 'value' ] >
+) {
 	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
-	return sizeRegex.test( value );
+	return sizeRegex.test( String( value ) );
 }
 
 /**
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl       Whether to use a select control.
- * @param {Object[]} optionsArray           Array of available font sizes objects.
- * @param {boolean}  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
- * @return {Object[]|null}                  Array of font sizes in proper format for the used control.
+ * @param  useSelectControl       Whether to use a select control.
+ * @param  optionsArray           Array of available font sizes objects.
+ * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @return Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
-	useSelectControl,
-	optionsArray,
-	disableCustomFontSizes
-) {
+	useSelectControl: boolean,
+	optionsArray: FontSize[],
+	disableCustomFontSizes: boolean
+): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
@@ -83,8 +101,11 @@ export function getFontSizeOptions(
 		: getToggleGroupOptions( optionsArray );
 }
 
-function getSelectOptions( optionsArray, disableCustomFontSizes ) {
-	const options = [
+function getSelectOptions(
+	optionsArray: FontSize[],
+	disableCustomFontSizes: boolean
+): FontSizeSelectOption[] {
+	const options: FontSizeOption[] = [
 		DEFAULT_FONT_SIZE_OPTION,
 		...optionsArray,
 		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
@@ -94,21 +115,21 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 		name,
 		size,
 		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseFloat( size ),
+			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
 	} ) );
 }
 
 /**
  * Build options for the toggle group options.
  *
- * @param {Array}    optionsArray An array of font size options.
- * @param {string[]} labelAliases An array of alternative labels.
- * @return {Array}   Remapped optionsArray.
+ * @param  optionsArray An array of font size options.
+ * @param  labelAliases An array of alternative labels.
+ * @return Remapped optionsArray.
  */
 export function getToggleGroupOptions(
-	optionsArray,
-	labelAliases = FONT_SIZES_ALIASES
-) {
+	optionsArray: FontSize[],
+	labelAliases: string[] = FONT_SIZES_ALIASES
+): FontSizeToggleGroupOption[] {
 	return optionsArray.map( ( { slug, size, name }, index ) => {
 		return {
 			key: slug,
@@ -119,7 +140,10 @@ export function getToggleGroupOptions(
 	} );
 }
 
-export function getSelectedOption( fontSizes, value ) {
+export function getSelectedOption(
+	fontSizes: FontSize[],
+	value: FontSizePickerProps[ 'value' ]
+): FontSizeOption {
 	if ( ! value ) {
 		return DEFAULT_FONT_SIZE_OPTION;
 	}

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

@@ -2057,7 +2057,12 @@ describe( 'FormTokenField', () => {
 
 			const suggestions = [ 'Pine', 'Pistachio', 'Sage' ];
 
-			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+			render(
+				<>
+					<FormTokenFieldWithState suggestions={ suggestions } />
+					<button>Click me</button>
+				</>
+			);
 
 			// No suggestions visible
 			const input = screen.getByRole( 'combobox' );
@@ -2093,6 +2098,22 @@ describe( 'FormTokenField', () => {
 				pineSuggestion.id
 			);
 
+			// Blur the input and make sure that the `aria-activedescendant`
+			// is removed
+			const button = screen.getByRole( 'button', { name: 'Click me' } );
+
+			await user.click( button );
+
+			expect( input ).not.toHaveAttribute( 'aria-activedescendant' );
+
+			// Focus the input again, `aria-activedescendant` should be added back.
+			await user.click( input );
+
+			expect( input ).toHaveAttribute(
+				'aria-activedescendant',
+				pineSuggestion.id
+			);
+
 			// Add the suggestion, which hides the list
 			await user.keyboard( '[Enter]' );
 

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

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ChangeEvent, ForwardedRef } from 'react';
+import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,9 +26,13 @@ export function UnForwardedTokenInput(
 		selectedSuggestionIndex,
 		className,
 		onChange,
+		onFocus,
+		onBlur,
 		...restProps
 	} = props;
 
+	const [ hasFocus, setHasFocus ] = useState( false );
+
 	const size = value ? value.length + 1 : 0;
 
 	const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
@@ -39,6 +43,18 @@ export function UnForwardedTokenInput(
 		}
 	};
 
+	const onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
+		setHasFocus( true );
+		onFocus?.( e );
+	};
+
+	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
+		e
+	) => {
+		setHasFocus( false );
+		onBlur?.( e );
+	};
+
 	return (
 		<input
 			ref={ ref }
@@ -47,6 +63,8 @@ export function UnForwardedTokenInput(
 			{ ...restProps }
 			value={ value || '' }
 			onChange={ onChangeHandler }
+			onFocus={ onFocusHandler }
+			onBlur={ onBlurHandler }
 			size={ size }
 			className={ classnames(
 				className,
@@ -62,7 +80,11 @@ export function UnForwardedTokenInput(
 					: undefined
 			}
 			aria-activedescendant={
-				selectedSuggestionIndex !== -1
+				// Only add the `aria-activedescendant` attribute when:
+				// - the user is actively interacting with the input (`hasFocus`)
+				// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
+				// - the list of suggestions are rendered in the DOM (`isExpanded`)
+				hasFocus && selectedSuggestionIndex !== -1 && isExpanded
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}

package/src/index.js

@@ -16,7 +16,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion } from './animation';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,
@@ -188,6 +188,7 @@ export {
 	Fill,
 	Provider as SlotFillProvider,
 	useSlot as __experimentalUseSlot,
+	useSlotFills as __experimentalUseSlotFills,
 } from './slot-fill';
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';

package/src/menu-item/README.md

@@ -79,3 +79,10 @@ If shortcut is a string, it is expecting the display text. If shortcut is an obj
 -   Default: `'menuitem'`
 
 [Aria Spec](https://www.w3.org/TR/wai-aria-1.1/#aria-checked). If you need to have selectable menu items use menuitemradio for single select, and menuitemcheckbox for multiselect.
+
+### `suffix`
+
+-   Type: `WPElement`
+-   Required: No
+
+Allows for markup other than icons or shortcuts to be added to the menu item.

package/src/menu-item/index.js

@@ -26,6 +26,7 @@ export function MenuItem( props, ref ) {
 		shortcut,
 		isSelected,
 		role = 'menuitem',
+		suffix,
 		...buttonProps
 	} = props;
 
@@ -63,11 +64,16 @@ export function MenuItem( props, ref ) {
 			{ ...buttonProps }
 		>
 			<span className="components-menu-item__item">{ children }</span>
-			<Shortcut
-				className="components-menu-item__shortcut"
-				shortcut={ shortcut }
-			/>
-			{ icon && iconPosition === 'right' && <Icon icon={ icon } /> }
+			{ ! suffix && (
+				<Shortcut
+					className="components-menu-item__shortcut"
+					shortcut={ shortcut }
+				/>
+			) }
+			{ ! suffix && icon && iconPosition === 'right' && (
+				<Icon icon={ icon } />
+			) }
+			{ suffix }
 		</Button>
 	);
 }

package/src/menu-item/style.scss

@@ -8,6 +8,7 @@
 			// Ensure unchecked items have clearance for consistency
 			// with checked items containing an icon or shortcut.
 			padding-right: $grid-unit-60;
+			box-sizing: initial;
 		}
 	}
 

package/src/menu-item/test/index.js

@@ -107,4 +107,40 @@ describe( 'MenuItem', () => {
 		expect( checkboxMenuItem ).toBeChecked();
 		expect( checkboxMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 	} );
+
+	it( 'should not render shortcut or right icon if suffix provided', () => {
+		render(
+			<MenuItem
+				icon={ <span>Icon</span> }
+				iconPosition="right"
+				role="menuitemcheckbox"
+				shortcut="Shortcut"
+				suffix="Suffix"
+			>
+				My item
+			</MenuItem>
+		);
+
+		expect( screen.getByText( 'Suffix' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Shortcut' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Icon' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render left icon despite suffix being provided', () => {
+		render(
+			<MenuItem
+				icon={ <span>Icon</span> }
+				iconPosition="left"
+				role="menuitemcheckbox"
+				shortcut="Shortcut"
+				suffix="Suffix"
+			>
+				My item
+			</MenuItem>
+		);
+
+		expect( screen.getByText( 'Icon' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Suffix' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Shortcut' ) ).not.toBeInTheDocument();
+	} );
 } );

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

@@ -112,6 +112,9 @@ function BottomSheetNavigationContainer( {
 				}
 			}
 		},
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ currentHeight ]
 	);
 
@@ -133,6 +136,9 @@ function BottomSheetNavigationContainer( {
 				/>
 			);
 		} );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ children ] );
 
 	return useMemo( () => {
@@ -158,6 +164,9 @@ function BottomSheetNavigationContainer( {
 				</BottomSheetNavigationProvider>
 			</View>
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ currentHeight, _theme ] );
 }
 

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

@@ -41,6 +41,9 @@ const BottomSheetNavigationScreen = ( {
 
 	const { setHeight } = useContext( BottomSheetNavigationContext );
 
+	// Disable reason: deferring this refactor to the native team.
+	// see https://github.com/WordPress/gutenberg/pull/41166
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [
 		setHeight,
 	] );
@@ -70,6 +73,8 @@ const BottomSheetNavigationScreen = ( {
 			 *
 			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
 			 */
+			// see https://github.com/WordPress/gutenberg/pull/41166
+			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] )
 	);
 
@@ -83,6 +88,9 @@ const BottomSheetNavigationScreen = ( {
 				setHeight( heightRef.current.maxHeight );
 			}
 			return () => {};
+			// Disable reason: deferring this refactor to the native team.
+			// see https://github.com/WordPress/gutenberg/pull/41166
+			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ setHeight ] )
 	);
 
@@ -127,6 +135,9 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		children,
 		isFocused,

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -23,6 +23,9 @@ const BottomSheetSubSheet = ( {
 		if ( showSheet ) {
 			setIsFullScreen( isFullScreen );
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ showSheet, isFullScreen ] );
 
 	return (

package/src/mobile/color-settings/index.native.js

@@ -34,6 +34,9 @@ const ColorSettingsMemo = memo(
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
 			onHandleClosingBottomSheet( null );
+			// Disable reason: deferring this refactor to the native team.
+			// see https://github.com/WordPress/gutenberg/pull/41166
+			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] );
 		return (
 			<BottomSheet.NavigationContainer>

package/src/mobile/color-settings/picker-screen.native.js

@@ -43,6 +43,9 @@ const PickerScreen = () => {
 				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
 			/>
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		setColor,
 		currentValue,

package/src/mobile/image/index.native.js

@@ -82,6 +82,9 @@ const ImageComponent = ( {
 			} );
 		}
 		return () => ( isCurrent = false );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ url ] );
 
 	const onContainerLayout = ( event ) => {

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -69,6 +69,9 @@ export const KeyboardAvoidingView = ( {
 			keyboardShowSubscription.remove();
 			keyboardHideSubscription.remove();
 		};
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {

package/src/mobile/link-picker/index.native.js

@@ -91,6 +91,9 @@ export const LinkPicker = ( {
 		getURLFromClipboard()
 			.then( ( url ) => setValue( { value, clipboardUrl: url } ) )
 			.catch( () => setValue( { value, clipboardUrl: '' } ) );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	// TODO: Localize the accessibility label.

package/src/mobile/link-picker/link-picker-results.native.js

@@ -86,6 +86,9 @@ export default function LinkPickerResults( {
 		setHasAllSuggestions( false );
 		setLinks( [ directEntry ] );
 		fetchMoreSuggestions( { query, links: [ directEntry ] } );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ query ] );
 
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -53,6 +53,9 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 				onCancel={ onCancel }
 			/>
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ inputValue ] );
 };
 

package/src/mobile/link-settings/index.native.js

@@ -101,6 +101,9 @@ function LinkSettings( {
 		if ( onHandleClosingBottomSheet ) {
 			onHandleClosingBottomSheet( onCloseSettingsSheet );
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
 
 	useEffect( () => {
@@ -112,6 +115,9 @@ function LinkSettings( {
 		if ( url !== urlInputValue ) {
 			setUrlInputValue( url || '' );
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ url ] );
 
 	useEffect( () => {
@@ -135,6 +141,9 @@ function LinkSettings( {
 		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
 			onSetAttributes();
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ editorSidebarOpened, isVisible ] );
 
 	useEffect( () => {
@@ -147,6 +156,9 @@ function LinkSettings( {
 				url: prependHTTP( urlValue ),
 			} );
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ urlValue ] );
 
 	const onChangeURL = useCallback(
@@ -176,6 +188,9 @@ function LinkSettings( {
 				rel: linkRelInputValue,
 			} );
 		}
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
@@ -208,6 +223,9 @@ function LinkSettings( {
 				rel: updatedRel,
 			} );
 		},
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ linkRelInputValue ]
 	);
 

package/src/mobile/link-settings/link-settings-screen.native.js

@@ -37,6 +37,9 @@ const LinkSettingsScreen = ( props ) => {
 				urlValue={ inputValue }
 			/>
 		);
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ props, inputValue, navigation, route ] );
 };