@wordpress/components 19.8.4 → 19.11.0

package/src/popover/test/utils.js

@@ -1,304 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	computePopoverPosition,
-	computePopoverYAxisPosition,
-	computePopoverXAxisPosition,
-	offsetIframe,
-} from '../utils';
-
-describe( 'computePopoverYAxisPosition', () => {
-	it( 'should leave the position as is there’s enought space', () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'bottom' )
-		).toEqual( {
-			contentHeight: null,
-			popoverTop: 30,
-			yAxis: 'bottom',
-		} );
-	} );
-
-	it( "should switch to bottom position if there's not enough space", () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'top' )
-		).toEqual( {
-			contentHeight: null,
-			popoverTop: 30,
-			yAxis: 'bottom',
-		} );
-	} );
-
-	it( "should set a maxHeight if there's not enough space in any direction", () => {
-		const anchorRect = {
-			top: 400,
-			left: 10,
-			bottom: 420,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 500,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'bottom' )
-		).toEqual( {
-			contentHeight: 390,
-			popoverTop: 400,
-			yAxis: 'top',
-		} );
-	} );
-
-	it( 'should position a popover in the middle', () => {
-		const anchorRect = {
-			top: 400,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverYAxisPosition( anchorRect, contentSize, 'middle' )
-		).toEqual( {
-			contentHeight: null,
-			popoverTop: 410,
-			yAxis: 'middle',
-		} );
-	} );
-} );
-
-describe( 'computePopoverXAxisPosition', () => {
-	it( 'should leave the position as is there’s enought space', () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'right' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 20,
-			xAxis: 'right',
-		} );
-	} );
-
-	it( "should switch to right position if there's not enough space", () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'center' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 20,
-			xAxis: 'right',
-		} );
-	} );
-
-	it( "should center popover if there's not enough space in any direction", () => {
-		const anchorRect = {
-			top: 10,
-			left: 400,
-			bottom: 30,
-			right: 420,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 800,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'right' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 512,
-			xAxis: 'center',
-		} );
-	} );
-
-	it( 'should set the content width to the viewport width if content is too wide', () => {
-		const anchorRect = {
-			top: 10,
-			left: 400,
-			bottom: 30,
-			right: 420,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 1500,
-			height: 300,
-		};
-
-		expect(
-			computePopoverXAxisPosition( anchorRect, contentSize, 'right' )
-		).toEqual( {
-			contentWidth: 1024,
-			popoverLeft: 512,
-			xAxis: 'center',
-		} );
-	} );
-} );
-
-describe( 'computePopoverPosition', () => {
-	it( 'should leave the position as is there’s enought space', () => {
-		const anchorRect = {
-			top: 10,
-			left: 10,
-			bottom: 30,
-			right: 30,
-			width: 20,
-			height: 20,
-		};
-
-		const contentSize = {
-			width: 200,
-			height: 300,
-		};
-
-		expect(
-			computePopoverPosition( anchorRect, contentSize, 'bottom right' )
-		).toEqual( {
-			contentWidth: null,
-			popoverLeft: 20,
-			xAxis: 'right',
-			contentHeight: null,
-			popoverTop: 30,
-			yAxis: 'bottom',
-		} );
-	} );
-} );
-
-describe( 'offsetIframe', () => {
-	let parent;
-
-	beforeEach( () => {
-		parent = document.createElement( 'div' );
-		document.body.appendChild( parent );
-	} );
-
-	afterEach( () => {
-		parent.remove();
-	} );
-
-	it( 'returns rect without changes if element is not an iframe', () => {
-		const rect = {
-			left: 50,
-			top: 50,
-			bottom: 100,
-			right: 100,
-			width: 50,
-			height: 50,
-		};
-		const offsettedRect = offsetIframe( rect, parent.ownerDocument );
-
-		expect( offsettedRect ).toEqual( rect );
-	} );
-
-	it( 'returns offsetted rect if element is in an iframe', () => {
-		const iframeLeft = 25;
-		const iframeTop = 50;
-		const childLeft = 10;
-		const childTop = 100;
-
-		const iframe = document.createElement( 'iframe' );
-		parent.appendChild( iframe );
-		// JSDom doesn't have a layout engine
-		// so we need to mock getBoundingClientRect and DOMRect.
-		iframe.getBoundingClientRect = jest.fn( () => ( {
-			width: 100,
-			height: 100,
-			top: iframeTop,
-			left: iframeLeft,
-		} ) );
-		iframe.contentWindow.DOMRect = jest.fn(
-			( left, top, width, height ) => ( {
-				left,
-				top,
-				right: left + width,
-				bottom: top + height,
-				width,
-				height,
-			} )
-		);
-
-		const child = document.createElement( 'div' );
-		iframe.contentWindow.document.body.appendChild( child );
-		child.getBoundingClientRect = jest.fn( () => ( {
-			width: 100,
-			height: 100,
-			top: childTop,
-			left: childLeft,
-		} ) );
-
-		const rect = child.getBoundingClientRect();
-		const offsettedRect = offsetIframe( rect, child.ownerDocument, parent );
-
-		expect( offsettedRect.left ).toBe( iframeLeft + childLeft );
-		expect( offsettedRect.top ).toBe( iframeTop + childTop );
-	} );
-} );

package/src/popover/utils.js

@@ -1,396 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Module constants
- */
-const HEIGHT_OFFSET = 10; // Used by the arrow and a bit of empty space.
-
-/**
- * Utility used to compute the popover position over the xAxis
- *
- * @param {Object}  anchorRect            Anchor Rect.
- * @param {Object}  contentSize           Content Size.
- * @param {string}  xAxis                 Desired xAxis.
- * @param {string}  corner                Desired corner.
- * @param {boolean} stickyBoundaryElement The boundary element to use when
- *                                        switching between sticky and normal
- *                                        position.
- * @param {string}  chosenYAxis           yAxis to be used.
- * @param {Element} boundaryElement       Boundary element.
- * @param {boolean} forcePosition         Don't adjust position based on anchor.
- * @param {boolean} forceXAlignment       Don't adjust alignment based on YAxis
- *
- * @return {Object} Popover xAxis position and constraints.
- */
-export function computePopoverXAxisPosition(
-	anchorRect,
-	contentSize,
-	xAxis,
-	corner,
-	stickyBoundaryElement,
-	chosenYAxis,
-	boundaryElement,
-	forcePosition,
-	forceXAlignment
-) {
-	const { width } = contentSize;
-
-	// Correct xAxis for RTL support.
-	if ( xAxis === 'left' && isRTL() ) {
-		xAxis = 'right';
-	} else if ( xAxis === 'right' && isRTL() ) {
-		xAxis = 'left';
-	}
-
-	if ( corner === 'left' && isRTL() ) {
-		corner = 'right';
-	} else if ( corner === 'right' && isRTL() ) {
-		corner = 'left';
-	}
-
-	// X axis alignment choices.
-	const anchorMidPoint = Math.round( anchorRect.left + anchorRect.width / 2 );
-	const centerAlignment = {
-		popoverLeft: anchorMidPoint,
-		contentWidth:
-			( anchorMidPoint - width / 2 > 0 ? width / 2 : anchorMidPoint ) +
-			( anchorMidPoint + width / 2 > window.innerWidth
-				? window.innerWidth - anchorMidPoint
-				: width / 2 ),
-	};
-
-	let leftAlignmentX = anchorRect.left;
-
-	if ( corner === 'right' ) {
-		leftAlignmentX = anchorRect.right;
-	} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
-		leftAlignmentX = anchorMidPoint;
-	}
-
-	let rightAlignmentX = anchorRect.right;
-
-	if ( corner === 'left' ) {
-		rightAlignmentX = anchorRect.left;
-	} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
-		rightAlignmentX = anchorMidPoint;
-	}
-
-	const leftAlignment = {
-		popoverLeft: leftAlignmentX,
-		contentWidth: leftAlignmentX - width > 0 ? width : leftAlignmentX,
-	};
-	const rightAlignment = {
-		popoverLeft: rightAlignmentX,
-		contentWidth:
-			rightAlignmentX + width > window.innerWidth
-				? window.innerWidth - rightAlignmentX
-				: width,
-	};
-
-	// Choosing the x axis.
-	let chosenXAxis = xAxis;
-	let contentWidth = null;
-
-	if ( ! stickyBoundaryElement && ! forcePosition ) {
-		if ( xAxis === 'center' && centerAlignment.contentWidth === width ) {
-			chosenXAxis = 'center';
-		} else if ( xAxis === 'left' && leftAlignment.contentWidth === width ) {
-			chosenXAxis = 'left';
-		} else if (
-			xAxis === 'right' &&
-			rightAlignment.contentWidth === width
-		) {
-			chosenXAxis = 'right';
-		} else {
-			chosenXAxis =
-				leftAlignment.contentWidth > rightAlignment.contentWidth
-					? 'left'
-					: 'right';
-			const chosenWidth =
-				chosenXAxis === 'left'
-					? leftAlignment.contentWidth
-					: rightAlignment.contentWidth;
-
-			// Limit width of the content to the viewport width
-			if ( width > window.innerWidth ) {
-				contentWidth = window.innerWidth;
-			}
-
-			// If we can't find any alignment options that could fit
-			// our content, then let's fallback to the center of the viewport.
-			if ( chosenWidth !== width ) {
-				chosenXAxis = 'center';
-				centerAlignment.popoverLeft = window.innerWidth / 2;
-			}
-		}
-	}
-
-	let popoverLeft;
-	if ( chosenXAxis === 'center' ) {
-		popoverLeft = centerAlignment.popoverLeft;
-	} else if ( chosenXAxis === 'left' ) {
-		popoverLeft = leftAlignment.popoverLeft;
-	} else {
-		popoverLeft = rightAlignment.popoverLeft;
-	}
-
-	if ( boundaryElement ) {
-		popoverLeft = Math.min(
-			popoverLeft,
-			boundaryElement.offsetLeft + boundaryElement.offsetWidth - width
-		);
-
-		// Avoid the popover being position beyond the left boundary if the
-		// direction is left to right.
-		if ( ! isRTL() ) {
-			popoverLeft = Math.max( popoverLeft, 0 );
-		}
-	}
-
-	return {
-		xAxis: chosenXAxis,
-		popoverLeft,
-		contentWidth,
-	};
-}
-
-/**
- * Utility used to compute the popover position over the yAxis
- *
- * @param {Object}       anchorRect            Anchor Rect.
- * @param {Object}       contentSize           Content Size.
- * @param {string}       yAxis                 Desired yAxis.
- * @param {string}       corner                Desired corner.
- * @param {boolean}      stickyBoundaryElement The boundary element to use when switching between sticky
- *                                             and normal position.
- * @param {Element}      anchorRef             The anchor element.
- * @param {Element}      relativeOffsetTop     If applicable, top offset of the relative positioned
- *                                             parent container.
- * @param {boolean}      forcePosition         Don't adjust position based on anchor.
- * @param {Element|null} editorWrapper         Element that wraps the editor content. Used to access
- *                                             scroll position to determine sticky behavior.
- * @return {Object} Popover xAxis position and constraints.
- */
-export function computePopoverYAxisPosition(
-	anchorRect,
-	contentSize,
-	yAxis,
-	corner,
-	stickyBoundaryElement,
-	anchorRef,
-	relativeOffsetTop,
-	forcePosition,
-	editorWrapper
-) {
-	const { height } = contentSize;
-
-	if ( stickyBoundaryElement ) {
-		const stickyRect = stickyBoundaryElement.getBoundingClientRect();
-		const stickyPositionTop = stickyRect.top + height - relativeOffsetTop;
-		const stickyPositionBottom =
-			stickyRect.bottom - height - relativeOffsetTop;
-
-		if ( anchorRect.top <= stickyPositionTop ) {
-			if ( editorWrapper ) {
-				// If a popover cannot be positioned above the anchor, even after scrolling, we must
-				// ensure we use the bottom position instead of the popover slot.  This prevents the
-				// popover from always restricting block content and interaction while selected if the
-				// block is near the top of the site editor.
-
-				const isRoomAboveInCanvas =
-					height + HEIGHT_OFFSET <
-					editorWrapper.scrollTop + anchorRect.top;
-				if ( ! isRoomAboveInCanvas ) {
-					return {
-						yAxis: 'bottom',
-						// If the bottom of the block is also below the bottom sticky position (ex -
-						// block is also taller than the editor window), return the bottom sticky
-						// position instead.  We do this instead of the top sticky position both to
-						// allow a smooth transition and more importantly to ensure every section of
-						// the block can be free from popover obscuration at some point in the
-						// scroll position.
-						popoverTop: Math.min(
-							anchorRect.bottom,
-							stickyPositionBottom
-						),
-					};
-				}
-			}
-			// Default sticky behavior.
-			return {
-				yAxis,
-				popoverTop: Math.min( anchorRect.bottom, stickyPositionTop ),
-			};
-		}
-	}
-
-	// Y axis alignment choices.
-	let anchorMidPoint = anchorRect.top + anchorRect.height / 2;
-
-	if ( corner === 'bottom' ) {
-		anchorMidPoint = anchorRect.bottom;
-	} else if ( corner === 'top' ) {
-		anchorMidPoint = anchorRect.top;
-	}
-
-	const middleAlignment = {
-		popoverTop: anchorMidPoint,
-		contentHeight:
-			( anchorMidPoint - height / 2 > 0 ? height / 2 : anchorMidPoint ) +
-			( anchorMidPoint + height / 2 > window.innerHeight
-				? window.innerHeight - anchorMidPoint
-				: height / 2 ),
-	};
-
-	const topAlignment = {
-		popoverTop: anchorRect.top,
-		contentHeight:
-			anchorRect.top - HEIGHT_OFFSET - height > 0
-				? height
-				: anchorRect.top - HEIGHT_OFFSET,
-	};
-	const bottomAlignment = {
-		popoverTop: anchorRect.bottom,
-		contentHeight:
-			anchorRect.bottom + HEIGHT_OFFSET + height > window.innerHeight
-				? window.innerHeight - HEIGHT_OFFSET - anchorRect.bottom
-				: height,
-	};
-
-	// Choosing the y axis.
-	let chosenYAxis = yAxis;
-	let contentHeight = null;
-
-	if ( ! stickyBoundaryElement && ! forcePosition ) {
-		if ( yAxis === 'middle' && middleAlignment.contentHeight === height ) {
-			chosenYAxis = 'middle';
-		} else if ( yAxis === 'top' && topAlignment.contentHeight === height ) {
-			chosenYAxis = 'top';
-		} else if (
-			yAxis === 'bottom' &&
-			bottomAlignment.contentHeight === height
-		) {
-			chosenYAxis = 'bottom';
-		} else {
-			chosenYAxis =
-				topAlignment.contentHeight > bottomAlignment.contentHeight
-					? 'top'
-					: 'bottom';
-			const chosenHeight =
-				chosenYAxis === 'top'
-					? topAlignment.contentHeight
-					: bottomAlignment.contentHeight;
-			contentHeight = chosenHeight !== height ? chosenHeight : null;
-		}
-	}
-
-	let popoverTop;
-	if ( chosenYAxis === 'middle' ) {
-		popoverTop = middleAlignment.popoverTop;
-	} else if ( chosenYAxis === 'top' ) {
-		popoverTop = topAlignment.popoverTop;
-	} else {
-		popoverTop = bottomAlignment.popoverTop;
-	}
-
-	return {
-		yAxis: chosenYAxis,
-		popoverTop,
-		contentHeight,
-	};
-}
-
-/**
- * Utility used to compute the popover position and the content max width/height for a popover given
- * its anchor rect and its content size.
- *
- * @param {Object}       anchorRect            Anchor Rect.
- * @param {Object}       contentSize           Content Size.
- * @param {string}       position              Position.
- * @param {boolean}      stickyBoundaryElement The boundary element to use when switching between
- *                                             sticky and normal position.
- * @param {Element}      anchorRef             The anchor element.
- * @param {number}       relativeOffsetTop     If applicable, top offset of the relative positioned
- *                                             parent container.
- * @param {Element}      boundaryElement       Boundary element.
- * @param {boolean}      forcePosition         Don't adjust position based on anchor.
- * @param {boolean}      forceXAlignment       Don't adjust alignment based on YAxis
- * @param {Element|null} editorWrapper         Element that wraps the editor content. Used to access
- *                                             scroll position to determine sticky behavior.
- * @return {Object} Popover position and constraints.
- */
-export function computePopoverPosition(
-	anchorRect,
-	contentSize,
-	position = 'top',
-	stickyBoundaryElement,
-	anchorRef,
-	relativeOffsetTop,
-	boundaryElement,
-	forcePosition,
-	forceXAlignment,
-	editorWrapper
-) {
-	const [ yAxis, xAxis = 'center', corner ] = position.split( ' ' );
-
-	const yAxisPosition = computePopoverYAxisPosition(
-		anchorRect,
-		contentSize,
-		yAxis,
-		corner,
-		stickyBoundaryElement,
-		anchorRef,
-		relativeOffsetTop,
-		forcePosition,
-		editorWrapper
-	);
-	const xAxisPosition = computePopoverXAxisPosition(
-		anchorRect,
-		contentSize,
-		xAxis,
-		corner,
-		stickyBoundaryElement,
-		yAxisPosition.yAxis,
-		boundaryElement,
-		forcePosition,
-		forceXAlignment
-	);
-
-	return {
-		...xAxisPosition,
-		...yAxisPosition,
-	};
-}
-
-/**
- * Offsets the given rect by the position of the iframe that contains the
- * element. If the owner document is not in an iframe then it returns with the
- * original rect. If the popover container document and the anchor document are
- * the same, the original rect will also be returned.
- *
- * @param {DOMRect}  rect          bounds of the element
- * @param {Document} ownerDocument document of the element
- * @param {Element}  container     The popover container to position.
- *
- * @return {DOMRect} offsetted bounds
- */
-export function offsetIframe( rect, ownerDocument, container ) {
-	const { defaultView } = ownerDocument;
-	const { frameElement } = defaultView;
-
-	if ( ! frameElement || ownerDocument === container.ownerDocument ) {
-		return rect;
-	}
-
-	const iframeRect = frameElement.getBoundingClientRect();
-	return new defaultView.DOMRect(
-		rect.left + iframeRect.left,
-		rect.top + iframeRect.top,
-		rect.width,
-		rect.height
-	);
-}