@wordpress/components 21.0.2 → 21.1.2-next.4d3b314fd5.0

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 ] );
 };
 

package/src/mobile/segmented-control/index.native.js

@@ -74,12 +74,18 @@ const SegmentedControls = ( {
 	useEffect( () => {
 		setActiveSegmentIndex( selectedSegmentIndex );
 		segmentHandler( segments[ selectedSegmentIndex ] );
+		// 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
 	}, [] );
 
 	useEffect( () => {
 		positionAnimationValue.setValue(
 			calculateEndValue( activeSegmentIndex )
 		);
+		// 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
 	}, [ segmentsDimensions ] );
 
 	const containerStyle = usePreferredColorSchemeStyle(

package/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -78,6 +78,9 @@ const useConvertUnitToMobile = ( value, unit ) => {
 		return () => {
 			dimensionsChangeSubscription.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
 	}, [] );
 
 	const onDimensionsChange = useCallback( ( { window } ) => {
@@ -94,6 +97,9 @@ const useConvertUnitToMobile = ( value, unit ) => {
 			valueToConvert,
 			valueUnit
 		);
+		// 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
 	}, [ windowSizes, value, unit ] );
 };
 

package/src/notice/index.native.js

@@ -14,7 +14,7 @@ import { BlurView } from '@react-native-community/blur';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, Platform } from '@wordpress/element';
+import { useEffect, useRef, useCallback, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -30,40 +30,37 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 	const timer = useRef( null );
 
 	useEffect( () => {
-		startAnimation();
-
-		return () => {
-			clearTimeout( timer?.current );
-		};
-	}, [] );
-
-	function onHide() {
+		// start animation
 		Animated.timing( animationValue, {
-			toValue: 0,
-			duration: 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
 		} ).start( ( { finished } ) => {
 			if ( finished && onNoticeHidden ) {
-				onNoticeHidden( id );
+				timer.current = setTimeout( () => {
+					onHide();
+				}, HIDE_TIMER );
 			}
 		} );
-	}
 
-	function startAnimation() {
+		return () => {
+			clearTimeout( timer?.current );
+		};
+	}, [ animationValue, onHide, onNoticeHidden ] );
+
+	const onHide = useCallback( () => {
 		Animated.timing( animationValue, {
-			toValue: 1,
-			duration: 300,
+			toValue: 0,
+			duration: 150,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
 		} ).start( ( { finished } ) => {
 			if ( finished && onNoticeHidden ) {
-				timer.current = setTimeout( () => {
-					onHide();
-				}, HIDE_TIMER );
+				onNoticeHidden( id );
 			}
 		} );
-	}
+	}, [ animationValue, onNoticeHidden, id ] );
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,

package/src/notice/list.native.js

@@ -14,6 +14,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import Notice from './';
 import styles from './style.scss';
+import { useCallback } from '@wordpress/element';
 
 function NoticeList() {
 	const { notices } = useSelect( ( select ) => {
@@ -25,9 +26,12 @@ function NoticeList() {
 
 	const { removeNotice } = useDispatch( noticesStore );
 
-	function onRemoveNotice( id ) {
-		removeNotice( id );
-	}
+	const onRemoveNotice = useCallback(
+		( id ) => {
+			removeNotice( id );
+		},
+		[ removeNotice ]
+	);
 
 	if ( ! notices.length ) {
 		return null;

package/src/palette-edit/index.js

@@ -316,7 +316,7 @@ export default function PaletteEdit( {
 			<PaletteHStackHeader>
 				<PaletteHeading>{ paletteLabel }</PaletteHeading>
 				<PaletteActionsContainer>
-					{ isEditing && (
+					{ hasElements && isEditing && (
 						<DoneButton
 							isSmall
 							onClick={ () => {

package/src/placeholder/style.scss

@@ -234,5 +234,5 @@
 	width: 100%;
 	height: 100%;
 	stroke: currentColor;
-	stroke-dasharray: 3;
+	opacity: 0.25;
 }

package/src/popover/index.tsx

@@ -10,9 +10,9 @@ import {
 	autoUpdate,
 	arrow,
 	offset as offsetMiddleware,
-	limitShift,
 	size,
 	Middleware,
+	MiddlewareArguments,
 } from '@floating-ui/react-dom';
 // eslint-disable-next-line no-restricted-imports
 import {
@@ -34,7 +34,6 @@ import {
 	useMemo,
 	useState,
 	useCallback,
-	useEffect,
 } from '@wordpress/element';
 import {
 	useViewportMatch,
@@ -65,6 +64,7 @@ import type {
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
+import { limitShift as customLimitShift } from './limit-shift';
 
 /**
  * Name of slot in which popover should fill.
@@ -281,42 +281,31 @@ const UnforwardedPopover = (
 	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
 	 */
 	const frameOffsetRef = useRef( getFrameOffset( referenceOwnerDocument ) );
-	/**
-	 * Store the offset prop in a ref, due to constraints with floating-ui:
-	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
-	 */
-	const offsetRef = useRef( offsetProp );
 
 	const middleware = [
-		offsetMiddleware( ( { placement: currentPlacement } ) => {
-			if ( ! frameOffsetRef.current ) {
-				return offsetRef.current;
-			}
-
-			const isTopBottomPlacement =
-				currentPlacement.includes( 'top' ) ||
-				currentPlacement.includes( 'bottom' );
-
-			// The main axis should represent the gap between the
-			// floating element and the reference element. The cross
-			// axis is always perpendicular to the main axis.
-			const mainAxis = isTopBottomPlacement ? 'y' : 'x';
-			const crossAxis = mainAxis === 'x' ? 'y' : 'x';
-
-			// When the popover is before the reference, subtract the offset,
-			// of the main axis else add it.
-			const hasBeforePlacement =
-				currentPlacement.includes( 'top' ) ||
-				currentPlacement.includes( 'left' );
-			const mainAxisModifier = hasBeforePlacement ? -1 : 1;
-
-			return {
-				mainAxis:
-					offsetRef.current +
-					frameOffsetRef.current[ mainAxis ] * mainAxisModifier,
-				crossAxis: frameOffsetRef.current[ crossAxis ],
-			};
-		} ),
+		// Custom middleware which adjusts the popover's position by taking into
+		// account the offset of the anchor's iframe (if any) compared to the page.
+		{
+			name: 'frameOffset',
+			fn( { x, y }: MiddlewareArguments ) {
+				if ( ! frameOffsetRef.current ) {
+					return {
+						x,
+						y,
+					};
+				}
+
+				return {
+					x: x + frameOffsetRef.current.x,
+					y: y + frameOffsetRef.current.y,
+					data: {
+						// This will be used in the customLimitShift() function.
+						amount: frameOffsetRef.current,
+					},
+				};
+			},
+		},
+		offsetMiddleware( offsetProp ),
 		computedFlipProp ? flipMiddleware() : undefined,
 		computedResizeProp
 			? size( {
@@ -339,7 +328,7 @@ const UnforwardedPopover = (
 		shouldShift
 			? shiftMiddleware( {
 					crossAxis: true,
-					limiter: limitShift(),
+					limiter: customLimitShift(),
 					padding: 1, // Necessary to avoid flickering at the edge of the viewport.
 			  } )
 			: undefined,
@@ -395,11 +384,6 @@ const UnforwardedPopover = (
 			} ),
 	} );
 
-	useEffect( () => {
-		offsetRef.current = offsetProp;
-		update();
-	}, [ offsetProp, update ] );
-
 	const arrowCallbackRef = useCallback(
 		( node ) => {
 			arrowRef.current = node;

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/stories/e2e/index.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Popover from '../..';
+
+export default {
+	title: 'Components/Popover',
+	component: Popover,
+};
+
+export const Default = () => {
+	const [ isVisible, setIsVisible ] = useState( false );
+
+	return (
+		<button onClick={ () => setIsVisible( ( state ) => ! state ) }>
+			Toggle Popover!
+			{ isVisible && <Popover>Popover is toggled!</Popover> }
+		</button>
+	);
+};