@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

package/src/popover/stories/index.js

@@ -73,7 +73,6 @@ export default {
 			options: AVAILABLE_POSITIONS,
 		},
 		__unstableSlotName: { control: { type: null } },
-		__unstableObserveElement: { control: { type: null } },
 		__unstableForcePosition: { control: { type: 'boolean' } },
 		__unstableShift: { control: { type: 'boolean' } },
 	},
@@ -126,7 +125,14 @@ export const Default = ( args ) => {
 	);
 };
 Default.args = {
-	children: <>Popover&apos;s&nbsp;content</>,
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+			aliquip ex ea commodo consequat.
+		</div>
+	),
 };
 
 /**
@@ -166,8 +172,15 @@ AllPlacements.parameters = {
 };
 AllPlacements.args = {
 	...Default.args,
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua.
+		</div>
+	),
 	noArrow: false,
 	offset: 10,
+	__unstableForcePosition: true,
 };
 
 export const DynamicHeight = ( { children, ...args } ) => {
@@ -230,7 +243,7 @@ export const WithSlotOutsideIframe = ( args ) => {
 				<Iframe
 					style={ {
 						width: '100%',
-						height: '100%',
+						height: '400px',
 					} }
 				>
 					<div
@@ -244,7 +257,7 @@ export const WithSlotOutsideIframe = ( args ) => {
 								padding: '8px',
 								background: 'salmon',
 								maxWidth: '200px',
-								marginTop: '30px',
+								marginTop: '100px',
 								marginLeft: 'auto',
 								marginRight: 'auto',
 							} }

package/src/popover/test/__snapshots__/index.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Popover should pass additional props to portaled element 1`] = `
+exports[`Popover Component should pass additional props to portaled element 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-left is-from-top"
+    class="components-popover"
     role="tooltip"
-    style="position: absolute;"
+    style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 0% 0% 0;"
     tabindex="-1"
   >
     <div
@@ -17,11 +17,11 @@ exports[`Popover should pass additional props to portaled element 1`] = `
 </span>
 `;
 
-exports[`Popover should render content 1`] = `
+exports[`Popover Component should render content 1`] = `
 <span>
   <div
-    class="components-popover components-animate__appear is-from-left is-from-top"
-    style="position: absolute;"
+    class="components-popover"
+    style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 0% 0% 0;"
     tabindex="-1"
   >
     <div

package/src/popover/test/index.js

@@ -13,57 +13,150 @@ import { useRef } from '@wordpress/element';
  */
 import Popover from '../';
 
+import { positionToPlacement, placementToMotionAnimationProps } from '../utils';
+
 describe( 'Popover', () => {
-	afterEach( () => {
-		if ( document.activeElement ) {
-			document.activeElement.blur();
-		}
-	} );
+	describe( 'Component', () => {
+		afterEach( () => {
+			if ( document.activeElement ) {
+				document.activeElement.blur();
+			}
+		} );
 
-	it( 'should allow focus-on-open behavior to be disabled', () => {
-		expect( document.activeElement ).toBe( document.body );
+		it( 'should allow focus-on-open behavior to be disabled', () => {
+			expect( document.activeElement ).toBe( document.body );
 
-		act( () => {
-			render( <Popover focusOnMount={ false } /> );
+			act( () => {
+				render( <Popover focusOnMount={ false } /> );
 
-			jest.advanceTimersByTime( 1 );
+				jest.advanceTimersByTime( 1 );
+			} );
+
+			expect( document.activeElement ).toBe( document.body );
 		} );
 
-		expect( document.activeElement ).toBe( document.body );
-	} );
+		it( 'should render content', () => {
+			let result;
+			act( () => {
+				result = render( <Popover>Hello</Popover> );
+			} );
 
-	it( 'should render content', () => {
-		let result;
-		act( () => {
-			result = render( <Popover>Hello</Popover> );
+			expect(
+				result.container.querySelector( 'span' )
+			).toMatchSnapshot();
 		} );
 
-		expect( result.container.querySelector( 'span' ) ).toMatchSnapshot();
-	} );
+		it( 'should pass additional props to portaled element', () => {
+			let result;
+			act( () => {
+				result = render( <Popover role="tooltip">Hello</Popover> );
+			} );
 
-	it( 'should pass additional props to portaled element', () => {
-		let result;
-		act( () => {
-			result = render( <Popover role="tooltip">Hello</Popover> );
+			expect(
+				result.container.querySelector( 'span' )
+			).toMatchSnapshot();
 		} );
 
-		expect( result.container.querySelector( 'span' ) ).toMatchSnapshot();
-	} );
+		it( 'should render correctly when anchorRef is provided', () => {
+			const PopoverWithAnchor = ( args ) => {
+				const anchorRef = useRef( null );
 
-	it( 'should render correctly when anchorRef is provided', () => {
-		const PopoverWithAnchor = ( args ) => {
-			const anchorRef = useRef( null );
+				return (
+					<div>
+						<p ref={ anchorRef }>Anchor</p>
+						<Popover { ...args } anchorRef={ anchorRef } />
+					</div>
+				);
+			};
 
-			return (
-				<div>
-					<p ref={ anchorRef }>Anchor</p>
-					<Popover { ...args } anchorRef={ anchorRef } />
-				</div>
-			);
-		};
+			render( <PopoverWithAnchor>Popover content</PopoverWithAnchor> );
+
+			expect( screen.getByText( 'Popover content' ) ).toBeInTheDocument();
+		} );
+	} );
 
-		render( <PopoverWithAnchor>Popover content</PopoverWithAnchor> );
+	describe( 'positionToPlacement', () => {
+		it.each( [
+			[ 'top left', 'top-end' ],
+			[ 'top center', 'top' ],
+			[ 'top right', 'top-start' ],
+			[ 'middle left', 'left' ],
+			[ 'middle center', 'center' ],
+			[ 'middle right', 'right' ],
+			[ 'bottom left', 'bottom-end' ],
+			[ 'bottom center', 'bottom' ],
+			[ 'bottom right', 'bottom-start' ],
+		] )( 'converts `%s` to `%s`', ( inputPosition, expectedPlacement ) => {
+			expect( positionToPlacement( inputPosition ) ).toEqual(
+				expectedPlacement
+			);
+		} );
+	} );
 
-		expect( screen.getByText( 'Popover content' ) ).toBeInTheDocument();
+	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 ],
+			] )(
+				'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' ],
+			] )(
+				'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/utils.js

@@ -0,0 +1,107 @@
+/**
+ * @typedef {import('../animate').AppearOrigin} AppearOrigin
+ * @typedef {import('@floating-ui/react-dom').Placement} FloatingUIPlacement
+ * @typedef {	'top left' | 'top center' | 'top right' | 'middle left' | 'middle center' | 'middle right' | 'bottom left' | 'bottom center' | 'bottom right' | 'bottom left' | 'bottom center' | 'bottom right' } LegacyPosition
+ */
+
+/**
+ * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
+ * (used by `floating-ui`).
+ *
+ * @param {LegacyPosition} position The legacy position
+ * @return {FloatingUIPlacement} The corresponding placement
+ */
+export const positionToPlacement = ( position ) => {
+	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';
+		}
+
+		// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
+		return x + suffix;
+	}
+
+	// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
+	return y;
+};
+
+/**
+ * @typedef AnimationOrigin
+ * @type {Object}
+ * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end")
+ * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)
+ */
+
+/** @type {Object.<FloatingUIPlacement, {originX: number, originY: number}>} */
+const PLACEMENT_TO_ANIMATION_ORIGIN = {
+	top: { originX: 0.5, originY: 1 }, // open from bottom, center
+	'top-start': { originX: 0, originY: 1 }, // open from bottom, left
+	'top-end': { originX: 1, originY: 1 }, // open from bottom, right
+	right: { originX: 0, originY: 0.5 }, // open from middle, left
+	'right-start': { originX: 0, originY: 0 }, // open from top, left
+	'right-end': { originX: 0, originY: 1 }, // open from bottom, left
+	bottom: { originX: 0.5, originY: 0 }, // open from top, center
+	'bottom-start': { originX: 0, originY: 0 }, // open from top, left
+	'bottom-end': { originX: 1, originY: 0 }, // open from top, right
+	left: { originX: 1, originY: 0.5 }, // open from middle, right
+	'left-start': { originX: 1, originY: 0 }, // open from top, right
+	'left-end': { originX: 1, originY: 1 }, // open from bottom, right
+};
+
+/**
+ * Given the floating-ui `placement`, compute the framer-motion props for the
+ * popover's entry animation.
+ *
+ * @param {FloatingUIPlacement} placement A placement string from floating ui
+ * @return {import('framer-motion').MotionProps} The object containing the motion props
+ */
+export const placementToMotionAnimationProps = ( placement ) => {
+	const translateProp =
+		placement.startsWith( 'top' ) || placement.startsWith( 'bottom' )
+			? 'translateY'
+			: 'translateX';
+	const translateDirection =
+		placement.startsWith( 'top' ) || placement.startsWith( 'left' )
+			? 1
+			: -1;
+
+	return {
+		style: PLACEMENT_TO_ANIMATION_ORIGIN[ placement ],
+		initial: {
+			opacity: 0,
+			scale: 0,
+			[ translateProp ]: `${ 2 * translateDirection }em`,
+		},
+		animate: { opacity: 1, scale: 1, [ translateProp ]: 0 },
+		transition: { duration: 0.1, ease: [ 0, 0, 0.2, 1 ] },
+	};
+};
+
+/**
+ * @typedef FrameOffset
+ * @type {Object}
+ * @property {number} x A numerical value representing the horizontal offset of the frame.
+ * @property {number} y A numerical value representing the vertical offset of the frame.
+ */
+
+/**
+ * Returns the offset of a document's frame element.
+ *
+ * @param {Document} document A document. This will usually be the document within an iframe.
+ *
+ * @return {FrameOffset|undefined} The offset of the document's frame element,
+ *                                 or undefined if the document has no frame element.
+ */
+export const getFrameOffset = ( document ) => {
+	const frameElement = document?.defaultView?.frameElement;
+	if ( ! frameElement ) {
+		return;
+	}
+	const iframeRect = frameElement.getBoundingClientRect();
+	return { x: iframeRect.left, y: iframeRect.top };
+};

package/src/range-control/index.tsx

@@ -49,6 +49,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
+		__nextHasNoMarginBottom = false,
 		afterIcon,
 		allowReset = false,
 		beforeIcon,
@@ -212,6 +213,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
@@ -225,6 +227,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 					</BeforeIconWrapper>
 				) }
 				<Wrapper
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 					className={ wrapperClasses }
 					color={ colorProp }
 					marks={ !! marks }

package/src/range-control/styles/range-control-styles.ts

@@ -29,7 +29,7 @@ const thumbSize = 12;
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
 	align-items: flex-start;
-	display: inline-flex;
+	display: flex;
 	justify-content: flex-start;
 	padding: 0;
 	position: relative;
@@ -40,11 +40,14 @@ export const Root = styled.div`
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
 	css( { color } );
 
-const wrapperMargin = ( { marks }: WrapperProps ) =>
-	css( { marginBottom: marks ? 16 : undefined } );
+const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
+	if ( ! __nextHasNoMarginBottom ) {
+		return css( { marginBottom: marks ? 16 : undefined } );
+	}
+	return '';
+};
 
 export const Wrapper = styled.div< WrapperProps >`
-	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
 	position: relative;
@@ -56,12 +59,14 @@ export const Wrapper = styled.div< WrapperProps >`
 `;
 
 export const BeforeIconWrapper = styled.span`
+	display: flex; // ensures the height isn't affected by line-height
 	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginRight: 6 } ) }
 `;
 
 export const AfterIconWrapper = styled.span`
+	display: flex; // ensures the height isn't affected by line-height
 	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginLeft: 6 } ) }

package/src/range-control/types.ts

@@ -76,7 +76,7 @@ export type ControlledRangeValue = number | '' | null;
 
 export type RangeControlProps< IconProps = unknown > = Pick<
 	BaseControlProps,
-	'hideLabelFromVision' | 'help'
+	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
 > &
 	MarksProps & {
 		/**
@@ -243,7 +243,10 @@ export type InputRangeProps = {
 	value?: number | '';
 };
 
-export type WrapperProps = {
+export type WrapperProps = Pick<
+	BaseControlProps,
+	'__nextHasNoMarginBottom'
+> & {
 	color?: CSSProperties[ 'color' ];
 	marks?: RangeMarks;
 };

package/src/select-control/chevron-down.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { chevronDown, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	chevronIconSize,
+	DownArrowWrapper,
+	InputControlSuffixWrapperWithClickThrough,
+} from './styles/select-control-styles';
+
+const SelectControlChevronDown = () => {
+	return (
+		<InputControlSuffixWrapperWithClickThrough>
+			<DownArrowWrapper>
+				<Icon icon={ chevronDown } size={ chevronIconSize } />
+			</DownArrowWrapper>
+		</InputControlSuffixWrapperWithClickThrough>
+	);
+};
+
+export default SelectControlChevronDown;

package/src/select-control/index.tsx

@@ -9,16 +9,16 @@ import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, forwardRef } from '@wordpress/element';
-import { Icon, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
-import { Select, DownArrowWrapper } from './styles/select-control-styles';
+import { Select } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../ui/context';
 import type { SelectControlProps } from './types';
+import SelectControlChevronDown from './chevron-down';
 
 const noop = () => {};
 
@@ -48,6 +48,7 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
+		__next36pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...props
 	}: WordPressComponentProps< SelectControlProps, 'select', false >,
@@ -100,18 +101,14 @@ function UnforwardedSelectControl(
 				isFocused={ isFocused }
 				label={ label }
 				size={ size }
-				suffix={
-					suffix || (
-						<DownArrowWrapper>
-							<Icon icon={ chevronDown } size={ 18 } />
-						</DownArrowWrapper>
-					)
-				}
+				suffix={ suffix || <SelectControlChevronDown /> }
 				prefix={ prefix }
 				labelPosition={ labelPosition }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
 			>
 				<Select
 					{ ...props }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }

package/src/select-control/styles/select-control-styles.ts

@@ -8,7 +8,9 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { COLORS, rtl } from '../../utils';
+import { space } from '../../ui/utils/space';
 import type { SelectControlProps } from '../types';
+import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 
 interface SelectProps
 	extends Pick< SelectControlProps, '__next36pxDefaultSize' | 'disabled' > {
@@ -85,29 +87,33 @@ const sizeStyles = ( {
 	return css( style );
 };
 
+export const chevronIconSize = 18;
+
 const sizePaddings = ( {
 	__next36pxDefaultSize,
 	selectSize = 'default',
 }: SelectProps ) => {
+	const iconWidth = chevronIconSize;
+
 	const sizes = {
 		default: {
 			paddingLeft: 16,
-			paddingRight: 32,
+			paddingRight: 16 + iconWidth,
 		},
 		small: {
 			paddingLeft: 8,
-			paddingRight: 24,
+			paddingRight: 8 + iconWidth,
 		},
 		'__unstable-large': {
 			paddingLeft: 16,
-			paddingRight: 32,
+			paddingRight: 16 + iconWidth,
 		},
 	};
 
 	if ( ! __next36pxDefaultSize ) {
 		sizes.default = {
 			paddingLeft: 8,
-			paddingRight: 24,
+			paddingRight: 8 + iconWidth,
 		};
 	}
 
@@ -129,6 +135,11 @@ export const Select = styled.select< SelectProps >`
 		font-family: inherit;
 		margin: 0;
 		width: 100%;
+		max-width: none;
+		cursor: pointer;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 
 		${ disabledStyles };
 		${ fontSizeStyles };
@@ -138,17 +149,15 @@ export const Select = styled.select< SelectProps >`
 `;
 
 export const DownArrowWrapper = styled.div`
-	align-items: center;
-	bottom: 0;
-	display: flex;
-	padding: 0 4px;
-	pointer-events: none;
+	margin-inline-end: ${ space( -1 ) }; // optically adjust the icon
+	line-height: 0;
+`;
+
+export const InputControlSuffixWrapperWithClickThrough = styled(
+	InputControlSuffixWrapper
+)`
 	position: absolute;
-	top: 0;
+	pointer-events: none;
 
 	${ rtl( { right: 0 } ) }
-
-	svg {
-		display: block;
-	}
 `;

package/src/slot-fill/test/slot.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -95,7 +95,7 @@ describe( 'Slot', () => {
 	it( 'calls the functions passed as the Slot’s fillProps in the Fill', () => {
 		const onClose = jest.fn();
 
-		const { getByText } = render(
+		render(
 			<Provider>
 				<Slot name="chicken" fillProps={ { onClose } } />
 				<Fill name="chicken">
@@ -108,7 +108,7 @@ describe( 'Slot', () => {
 			</Provider>
 		);
 
-		fireEvent.click( getByText( 'Click me' ) );
+		fireEvent.click( screen.getByText( 'Click me' ) );
 
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -150,7 +150,7 @@ describe( 'Slot', () => {
 	} );
 
 	it( 'should re-render Slot when not bubbling virtually', () => {
-		const { container, getByRole } = render(
+		const { container } = render(
 			<Provider>
 				<div>
 					<Slot name="egg" />
@@ -161,7 +161,7 @@ describe( 'Slot', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		fireEvent.click( getByRole( 'button' ) );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		expect( container ).toMatchSnapshot();
 	} );