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

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/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