@wordpress/components 21.1.0 → 21.2.0

package/src/popover/limit-shift.ts

@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import type {
+	Axis,
+	Coords,
+	Placement,
+	Side,
+	MiddlewareArguments,
+} from '@floating-ui/react-dom';
+
+/**
+ * Parts of this source were derived and modified from `floating-ui`,
+ * released under the MIT license.
+ *
+ * https://github.com/floating-ui/floating-ui
+ *
+ * Copyright (c) 2021 Floating UI contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Custom limiter function for the `shift` middleware.
+ * This function is mostly identical default `limitShift` from ``@floating-ui`;
+ * the only difference is that, when computing the min/max shift limits, it
+ * also takes into account the iframe offset that is added by the
+ * custom "frameOffset" middleware.
+ *
+ * All unexported types and functions are also from the `@floating-ui` library,
+ * and have been copied to this file for convenience.
+ */
+
+type LimitShiftOffset =
+	| ( ( args: MiddlewareArguments ) =>
+			| number
+			| {
+					/**
+					 * Offset the limiting of the axis that runs along the alignment of the
+					 * floating element.
+					 */
+					mainAxis?: number;
+					/**
+					 * Offset the limiting of the axis that runs along the side of the
+					 * floating element.
+					 */
+					crossAxis?: number;
+			  } )
+	| number
+	| {
+			/**
+			 * Offset the limiting of the axis that runs along the alignment of the
+			 * floating element.
+			 */
+			mainAxis?: number;
+			/**
+			 * Offset the limiting of the axis that runs along the side of the
+			 * floating element.
+			 */
+			crossAxis?: number;
+	  };
+
+type LimitShiftOptions = {
+	/**
+	 * Offset when limiting starts. `0` will limit when the opposite edges of the
+	 * reference and floating elements are aligned.
+	 * - positive = start limiting earlier
+	 * - negative = start limiting later
+	 */
+	offset: LimitShiftOffset;
+	/**
+	 * Whether to limit the axis that runs along the alignment of the floating
+	 * element.
+	 */
+	mainAxis: boolean;
+	/**
+	 * Whether to limit the axis that runs along the side of the floating element.
+	 */
+	crossAxis: boolean;
+};
+
+function getSide( placement: Placement ): Side {
+	return placement.split( '-' )[ 0 ] as Side;
+}
+
+function getMainAxisFromPlacement( placement: Placement ): Axis {
+	return [ 'top', 'bottom' ].includes( getSide( placement ) ) ? 'x' : 'y';
+}
+
+function getCrossAxis( axis: Axis ): Axis {
+	return axis === 'x' ? 'y' : 'x';
+}
+
+export const limitShift = (
+	options: Partial< LimitShiftOptions > = {}
+): {
+	options: Partial< LimitShiftOffset >;
+	fn: ( middlewareArguments: MiddlewareArguments ) => Coords;
+} => ( {
+	options,
+	fn( middlewareArguments ) {
+		const { x, y, placement, rects, middlewareData } = middlewareArguments;
+		const {
+			offset = 0,
+			mainAxis: checkMainAxis = true,
+			crossAxis: checkCrossAxis = true,
+		} = options;
+
+		const coords = { x, y };
+		const mainAxis = getMainAxisFromPlacement( placement );
+		const crossAxis = getCrossAxis( mainAxis );
+
+		let mainAxisCoord = coords[ mainAxis ];
+		let crossAxisCoord = coords[ crossAxis ];
+
+		const rawOffset =
+			typeof offset === 'function'
+				? offset( middlewareArguments )
+				: offset;
+		const computedOffset =
+			typeof rawOffset === 'number'
+				? { mainAxis: rawOffset, crossAxis: 0 }
+				: { mainAxis: 0, crossAxis: 0, ...rawOffset };
+
+		// At the moment of writing, this is the only difference
+		// with the `limitShift` function from `@floating-ui`.
+		// This offset needs to be added to all min/max limits
+		// in order to make the shift-limiting work as expected.
+		const additionalFrameOffset = {
+			x: 0,
+			y: 0,
+			...middlewareData.frameOffset?.amount,
+		};
+
+		if ( checkMainAxis ) {
+			const len = mainAxis === 'y' ? 'height' : 'width';
+			const limitMin =
+				rects.reference[ mainAxis ] -
+				rects.floating[ len ] +
+				computedOffset.mainAxis +
+				additionalFrameOffset[ mainAxis ];
+			const limitMax =
+				rects.reference[ mainAxis ] +
+				rects.reference[ len ] -
+				computedOffset.mainAxis +
+				additionalFrameOffset[ mainAxis ];
+
+			if ( mainAxisCoord < limitMin ) {
+				mainAxisCoord = limitMin;
+			} else if ( mainAxisCoord > limitMax ) {
+				mainAxisCoord = limitMax;
+			}
+		}
+
+		if ( checkCrossAxis ) {
+			const len = mainAxis === 'y' ? 'width' : 'height';
+			const isOriginSide = [ 'top', 'left' ].includes(
+				getSide( placement )
+			);
+			const limitMin =
+				rects.reference[ crossAxis ] -
+				rects.floating[ len ] +
+				( isOriginSide
+					? middlewareData.offset?.[ crossAxis ] ?? 0
+					: 0 ) +
+				( isOriginSide ? 0 : computedOffset.crossAxis ) +
+				additionalFrameOffset[ crossAxis ];
+			const limitMax =
+				rects.reference[ crossAxis ] +
+				rects.reference[ len ] +
+				( isOriginSide
+					? 0
+					: middlewareData.offset?.[ crossAxis ] ?? 0 ) -
+				( isOriginSide ? computedOffset.crossAxis : 0 ) +
+				additionalFrameOffset[ crossAxis ];
+
+			if ( crossAxisCoord < limitMin ) {
+				crossAxisCoord = limitMin;
+			} else if ( crossAxisCoord > limitMax ) {
+				crossAxisCoord = limitMax;
+			}
+		}
+
+		return {
+			[ mainAxis ]: mainAxisCoord,
+			[ crossAxis ]: crossAxisCoord,
+		} as Coords;
+	},
+} );

package/src/popover/test/index.tsx

@@ -0,0 +1,230 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import type { CSSProperties } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { positionToPlacement, placementToMotionAnimationProps } from '../utils';
+import Popover from '..';
+import type { PopoverProps } from '../types';
+
+type PositionToPlacementTuple = [
+	NonNullable< PopoverProps[ 'position' ] >,
+	NonNullable< PopoverProps[ 'placement' ] >
+];
+type PlacementToAnimationOriginTuple = [
+	NonNullable< PopoverProps[ 'placement' ] >,
+	number,
+	number
+];
+type PlacementToInitialTranslationTuple = [
+	NonNullable< PopoverProps[ 'placement' ] >,
+	'translateY' | 'translateX',
+	CSSProperties[ 'translate' ]
+];
+
+// There's no matching `placement` for 'middle center' positions,
+// fallback to 'bottom' (same as `floating-ui`'s default.)
+const FALLBACK_FOR_MIDDLE_CENTER_POSITIONS = 'bottom';
+
+const ALL_POSITIONS_TO_EXPECTED_PLACEMENTS: PositionToPlacementTuple[] = [
+	// Format: [yAxis]
+	[ 'middle', FALLBACK_FOR_MIDDLE_CENTER_POSITIONS ],
+	[ 'bottom', 'bottom' ],
+	[ 'top', 'top' ],
+	// Format: [yAxis] [xAxis]
+	[ 'middle left', 'left' ],
+	[ 'middle center', FALLBACK_FOR_MIDDLE_CENTER_POSITIONS ],
+	[ 'middle right', 'right' ],
+	[ 'bottom left', 'bottom-end' ],
+	[ 'bottom center', 'bottom' ],
+	[ 'bottom right', 'bottom-start' ],
+	[ 'top left', 'top-end' ],
+	[ 'top center', 'top' ],
+	[ 'top right', 'top-start' ],
+	// Format: [yAxis] [xAxis] [corner]
+	[ 'middle left left', 'left' ],
+	[ 'middle left right', 'left' ],
+	[ 'middle left bottom', 'left-end' ],
+	[ 'middle left top', 'left-start' ],
+	[ 'middle center left', FALLBACK_FOR_MIDDLE_CENTER_POSITIONS ],
+	[ 'middle center right', FALLBACK_FOR_MIDDLE_CENTER_POSITIONS ],
+	[ 'middle center bottom', FALLBACK_FOR_MIDDLE_CENTER_POSITIONS ],
+	[ 'middle center top', FALLBACK_FOR_MIDDLE_CENTER_POSITIONS ],
+	[ 'middle right left', 'right' ],
+	[ 'middle right right', 'right' ],
+	[ 'middle right bottom', 'right-end' ],
+	[ 'middle right top', 'right-start' ],
+	[ 'bottom left left', 'bottom-end' ],
+	[ 'bottom left right', 'bottom-end' ],
+	[ 'bottom left bottom', 'bottom-end' ],
+	[ 'bottom left top', 'bottom-end' ],
+	[ 'bottom center left', 'bottom' ],
+	[ 'bottom center right', 'bottom' ],
+	[ 'bottom center bottom', 'bottom' ],
+	[ 'bottom center top', 'bottom' ],
+	[ 'bottom right left', 'bottom-start' ],
+	[ 'bottom right right', 'bottom-start' ],
+	[ 'bottom right bottom', 'bottom-start' ],
+	[ 'bottom right top', 'bottom-start' ],
+	[ 'top left left', 'top-end' ],
+	[ 'top left right', 'top-end' ],
+	[ 'top left bottom', 'top-end' ],
+	[ 'top left top', 'top-end' ],
+	[ 'top center left', 'top' ],
+	[ 'top center right', 'top' ],
+	[ 'top center bottom', 'top' ],
+	[ 'top center top', 'top' ],
+	[ 'top right left', 'top-start' ],
+	[ 'top right right', 'top-start' ],
+	[ 'top right bottom', 'top-start' ],
+	[ 'top right top', 'top-start' ],
+];
+
+describe( 'Popover', () => {
+	describe( 'Component', () => {
+		describe( 'basic behavior', () => {
+			it( 'should render content', () => {
+				render( <Popover>Hello</Popover> );
+
+				expect( screen.getByText( 'Hello' ) ).toBeInTheDocument();
+			} );
+
+			it( 'should forward additional props to portaled element', () => {
+				render( <Popover role="tooltip">Hello</Popover> );
+
+				expect( screen.getByRole( 'tooltip' ) ).toBeInTheDocument();
+			} );
+		} );
+
+		describe( 'anchor', () => {
+			it( 'should render correctly when anchor is provided', () => {
+				const PopoverWithAnchor = ( args: PopoverProps ) => {
+					// Use internal state instead of a ref to make sure that the component
+					// re-renders when the popover's anchor updates.
+					const [ anchor, setAnchor ] =
+						useState< HTMLParagraphElement | null >( null );
+
+					return (
+						<div>
+							<p ref={ setAnchor }>Anchor</p>
+							<Popover { ...args } anchor={ anchor } />
+						</div>
+					);
+				};
+
+				render(
+					<PopoverWithAnchor>Popover content</PopoverWithAnchor>
+				);
+
+				expect(
+					screen.getByText( 'Popover content' )
+				).toBeInTheDocument();
+			} );
+		} );
+
+		describe( 'focus behavior', () => {
+			it( 'should focus the popover by default when opened', () => {
+				render( <Popover>Popover content</Popover> );
+
+				expect(
+					screen.getByText( 'Popover content' ).parentElement
+				).toHaveFocus();
+			} );
+
+			it( 'should allow focus-on-open behavior to be disabled', () => {
+				render(
+					<Popover focusOnMount={ false }>Popover content</Popover>
+				);
+
+				expect( document.body ).toHaveFocus();
+			} );
+		} );
+	} );
+
+	describe( 'positionToPlacement', () => {
+		it.each( ALL_POSITIONS_TO_EXPECTED_PLACEMENTS )(
+			'converts `%s` to `%s`',
+			( inputPosition, expectedPlacement ) => {
+				expect( positionToPlacement( inputPosition ) ).toEqual(
+					expectedPlacement
+				);
+			}
+		);
+	} );
+
+	describe( 'placementToMotionAnimationProps', () => {
+		describe( 'animation origin', () => {
+			it.each( [
+				[ 'top', 0.5, 1 ],
+				[ 'top-start', 0, 1 ],
+				[ 'top-end', 1, 1 ],
+				[ 'right', 0, 0.5 ],
+				[ 'right-start', 0, 0 ],
+				[ 'right-end', 0, 1 ],
+				[ 'bottom', 0.5, 0 ],
+				[ 'bottom-start', 0, 0 ],
+				[ 'bottom-end', 1, 0 ],
+				[ 'left', 1, 0.5 ],
+				[ 'left-start', 1, 0 ],
+				[ 'left-end', 1, 1 ],
+			] as PlacementToAnimationOriginTuple[] )(
+				'for the `%s` placement computes an animation origin of (%d, %d)',
+				( inputPlacement, expectedOriginX, expectedOriginY ) => {
+					expect(
+						placementToMotionAnimationProps( inputPlacement )
+					).toEqual(
+						expect.objectContaining( {
+							style: expect.objectContaining( {
+								originX: expectedOriginX,
+								originY: expectedOriginY,
+							} ),
+						} )
+					);
+				}
+			);
+		} );
+		describe( 'initial translation', () => {
+			it.each( [
+				[ 'top', 'translateY', '2em' ],
+				[ 'top-start', 'translateY', '2em' ],
+				[ 'top-end', 'translateY', '2em' ],
+				[ 'right', 'translateX', '-2em' ],
+				[ 'right-start', 'translateX', '-2em' ],
+				[ 'right-end', 'translateX', '-2em' ],
+				[ 'bottom', 'translateY', '-2em' ],
+				[ 'bottom-start', 'translateY', '-2em' ],
+				[ 'bottom-end', 'translateY', '-2em' ],
+				[ 'left', 'translateX', '2em' ],
+				[ 'left-start', 'translateX', '2em' ],
+				[ 'left-end', 'translateX', '2em' ],
+			] as PlacementToInitialTranslationTuple[] )(
+				'for the `%s` placement computes an initial `%s` of `%s',
+				(
+					inputPlacement,
+					expectedTranslationProp,
+					expectedTranslationValue
+				) => {
+					expect(
+						placementToMotionAnimationProps( inputPlacement )
+					).toEqual(
+						expect.objectContaining( {
+							initial: expect.objectContaining( {
+								[ expectedTranslationProp ]:
+									expectedTranslationValue,
+							} ),
+						} )
+					);
+				}
+			);
+		} );
+	} );
+} );

package/src/popover/types.ts

@@ -121,6 +121,7 @@ export type PopoverProps = {
 	 * _Note: this prop is deprecated. Use the `placement` prop instead._
 	 */
 	position?:
+		| `${ PositionYAxis }`
 		| `${ PositionYAxis } ${ PositionXAxis }`
 		| `${ PositionYAxis } ${ PositionXAxis } ${ PositionCorner }`;
 	/**

package/src/popover/utils.ts

@@ -14,6 +14,62 @@ import type {
 	PopoverAnchorRefTopBottom,
 } from './types';
 
+const POSITION_TO_PLACEMENT: Record<
+	NonNullable< PopoverProps[ 'position' ] >,
+	NonNullable< PopoverProps[ 'placement' ] >
+> = {
+	bottom: 'bottom',
+	top: 'top',
+	'middle left': 'left',
+	'middle right': 'right',
+	'bottom left': 'bottom-end',
+	'bottom center': 'bottom',
+	'bottom right': 'bottom-start',
+	'top left': 'top-end',
+	'top center': 'top',
+	'top right': 'top-start',
+	'middle left left': 'left',
+	'middle left right': 'left',
+	'middle left bottom': 'left-end',
+	'middle left top': 'left-start',
+	'middle right left': 'right',
+	'middle right right': 'right',
+	'middle right bottom': 'right-end',
+	'middle right top': 'right-start',
+	'bottom left left': 'bottom-end',
+	'bottom left right': 'bottom-end',
+	'bottom left bottom': 'bottom-end',
+	'bottom left top': 'bottom-end',
+	'bottom center left': 'bottom',
+	'bottom center right': 'bottom',
+	'bottom center bottom': 'bottom',
+	'bottom center top': 'bottom',
+	'bottom right left': 'bottom-start',
+	'bottom right right': 'bottom-start',
+	'bottom right bottom': 'bottom-start',
+	'bottom right top': 'bottom-start',
+	'top left left': 'top-end',
+	'top left right': 'top-end',
+	'top left bottom': 'top-end',
+	'top left top': 'top-end',
+	'top center left': 'top',
+	'top center right': 'top',
+	'top center bottom': 'top',
+	'top center top': 'top',
+	'top right left': 'top-start',
+	'top right right': 'top-start',
+	'top right bottom': 'top-start',
+	'top right top': 'top-start',
+	// `middle`/`middle center [corner?]` positions are associated to a fallback
+	// `bottom` placement because there aren't any corresponding placement values.
+	middle: 'bottom',
+	'middle center': 'bottom',
+	'middle center bottom': 'bottom',
+	'middle center left': 'bottom',
+	'middle center right': 'bottom',
+	'middle center top': 'bottom',
+};
+
 /**
  * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
  * (used by `floating-ui`).
@@ -23,22 +79,8 @@ import type {
  */
 export const positionToPlacement = (
 	position: NonNullable< PopoverProps[ 'position' ] >
-): NonNullable< PopoverProps[ 'placement' ] > => {
-	const [ x, y, z ] = position.split( ' ' );
-
-	if ( [ 'top', 'bottom' ].includes( x ) ) {
-		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'right' ) {
-			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
-			suffix = '-end';
-		}
-
-		return ( x + suffix ) as NonNullable< PopoverProps[ 'placement' ] >;
-	}
-
-	return y as NonNullable< PopoverProps[ 'placement' ] >;
-};
+): NonNullable< PopoverProps[ 'placement' ] > =>
+	POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
 
 /**
  * @typedef AnimationOrigin

package/src/range-control/types.ts

@@ -290,39 +290,6 @@ export type UseControlledRangeValueArgs = {
 	value: number | null;
 };
 
-export type UseDebouncedHoverInteractionArgs = {
-	/**
-	 *  A callback function invoked when the element is hidden.
-	 *
-	 * @default () => {}
-	 */
-	onHide?: () => void;
-	/**
-	 * A callback function invoked when the mouse is moved out of the element.
-	 *
-	 * @default () => {}
-	 */
-	onMouseLeave?: MouseEventHandler< HTMLInputElement >;
-	/**
-	 * A callback function invoked when the mouse is moved.
-	 *
-	 * @default () => {}
-	 */
-	onMouseMove?: MouseEventHandler< HTMLInputElement >;
-	/**
-	 * A callback function invoked when the element is shown.
-	 *
-	 * @default () => {}
-	 */
-	onShow?: () => void;
-	/**
-	 * Timeout before the element is shown or hidden.
-	 *
-	 * @default 300
-	 */
-	timeout?: number;
-};
-
 export type UseMarksArgs = NumericProps & {
 	marks: RangeMarks;
 	step: number;

package/src/resizable-box/resize-tooltip/utils.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
 const noop = () => {};
@@ -84,23 +84,23 @@ export function useResizeLabel( {
 	 */
 	const moveTimeoutRef = useRef< number >();
 
-	const unsetMoveXY = () => {
-		/*
-		 * If axis is controlled, we will avoid resetting the moveX and moveY values.
-		 * This will allow for the preferred axis values to persist in the label.
-		 */
-		if ( isAxisControlled ) return;
-		setMoveX( false );
-		setMoveY( false );
-	};
+	const debounceUnsetMoveXY = useCallback( () => {
+		const unsetMoveXY = () => {
+			/*
+			 * If axis is controlled, we will avoid resetting the moveX and moveY values.
+			 * This will allow for the preferred axis values to persist in the label.
+			 */
+			if ( isAxisControlled ) return;
+			setMoveX( false );
+			setMoveY( false );
+		};
 
-	const debounceUnsetMoveXY = () => {
 		if ( moveTimeoutRef.current ) {
 			window.clearTimeout( moveTimeoutRef.current );
 		}
 
 		moveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );
-	};
+	}, [ fadeTimeout, isAxisControlled ] );
 
 	useEffect( () => {
 		/*
@@ -143,7 +143,7 @@ export function useResizeLabel( {
 
 		onResize( { width, height } );
 		debounceUnsetMoveXY();
-	}, [ width, height ] );
+	}, [ width, height, onResize, debounceUnsetMoveXY ] );
 
 	const label = getSizeLabel( {
 		axis,

package/src/sandbox/index.js

@@ -205,32 +205,38 @@ export default function Sandbox( {
 			setHeight( data.height );
 		}
 
-		const { ownerDocument } = ref.current;
+		const iframe = ref.current;
+		const { ownerDocument } = iframe;
 		const { defaultView } = ownerDocument;
 
 		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
 		// after reordering the containing block. See these two issues for more details:
 		// https://github.com/WordPress/gutenberg/issues/6146
 		// https://github.com/facebook/react/issues/18752
-		ref.current.addEventListener( 'load', tryNoForceSandbox, false );
+		iframe.addEventListener( 'load', tryNoForceSandbox, false );
 		defaultView.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
-			ref.current?.removeEventListener(
-				'load',
-				tryNoForceSandbox,
-				false
-			);
+			iframe?.removeEventListener( 'load', tryNoForceSandbox, false );
 			defaultView.addEventListener( 'message', checkMessageForResize );
 		};
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useEffect( () => {
 		trySandbox();
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandbox( true );
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ html, type ] );
 
 	return (

package/src/sandbox/index.native.js

@@ -282,6 +282,9 @@ function Sandbox( {
 
 	useEffect( () => {
 		updateContentHtml();
+		// 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
 	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {