@wordpress/components 19.16.0 → 19.17.0

package/src/popover/stories/index.js

@@ -1,123 +1,176 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
+import { __unstableIframe as Iframe } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { DraggableWrapper } from './_utils';
-import Popover from '../';
 import Button from '../../button';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import Popover from '../';
+
+// Format: "[yAxis] [xAxis]"
+// Valid yAxis values: 'top', 'middle', 'bottom'
+// Valid xAxis values: 'left', 'center', 'right'
+const AVAILABLE_POSITIONS = [
+	'top left',
+	'top center',
+	'top right',
+	'middle left',
+	'middle center',
+	'middle right',
+	'bottom left',
+	'bottom center',
+	'bottom right',
+];
+
+// Follows floating UI's conventions
+// See https://floating-ui.com/docs/computePosition#placement
+const AVAILABLE_PLACEMENTS = [
+	'top',
+	'top-start',
+	'top-end',
+	'right',
+	'right-start',
+	'right-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+];
 
 export default {
 	title: 'Components/Popover',
 	component: Popover,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const show = boolean( 'Example: Show', true );
-	const children = text( 'children', 'Popover Content' );
-	const animate = boolean( 'animate', false );
-	const expandOnMobile = boolean( 'expandOnMobile', false );
-	const focusOnMount = select(
-		'focusOnMount',
-		{
-			firstElement: 'firstElement',
-			container: 'container',
+	argTypes: {
+		anchorRef: { control: { type: null } },
+		anchorRect: { control: { type: null } },
+		animate: { control: { type: 'boolean' } },
+		children: { control: { type: null } },
+		className: { control: { type: 'text' } },
+		expandOnMobile: { control: { type: 'boolean' } },
+		focusOnMount: {
+			control: { type: 'select' },
+			options: [ 'firstElement', 'container', false ],
 		},
-		'firstElement'
-	);
-	const noArrow = boolean( 'noArrow', false );
-	const isAlternate = boolean( 'isAlternate', false );
-
-	const props = {
-		animate,
-		children,
-		expandOnMobile,
-		focusOnMount,
-		noArrow,
-		isAlternate,
-	};
-
-	if ( ! show ) {
-		return null;
-	}
-
-	return <Popover { ...props } />;
+		getAnchorRect: { control: { type: null } },
+		headerTitle: { control: { type: 'text' } },
+		isAlternate: { control: { type: 'boolean' } },
+		noArrow: { control: { type: 'boolean' } },
+		onClose: { control: { type: null } },
+		offset: { control: { type: 'number' } },
+		onFocusOutside: { control: { type: null } },
+		placement: {
+			control: { type: 'select' },
+			options: AVAILABLE_PLACEMENTS,
+		},
+		position: {
+			control: { type: 'select' },
+			options: AVAILABLE_POSITIONS,
+		},
+		__unstableSlotName: { control: { type: null } },
+		__unstableObserveElement: { control: { type: null } },
+		__unstableForcePosition: { control: { type: 'boolean' } },
+		__unstableShift: { control: { type: 'boolean' } },
+	},
 };
 
-const DragExample = ( props ) => {
-	const { label, content, ...restProps } = props;
+const PopoverWithAnchor = ( args ) => {
+	const anchorRef = useRef( null );
 
 	return (
-		<div>
-			<div style={ { position: 'absolute', color: '#555' } }>
-				<p>Move the gray box around.</p>
-				<p>
-					The{ ' ' }
-					<strong style={ { background: 'pink' } }>
-						pink bordered
-					</strong>{ ' ' }
-					element is a parent.
-				</p>
-				<p>
-					The{ ' ' }
-					<strong style={ { background: 'cyan' } }>
-						cyan bordered
-					</strong>{ ' ' }
-					element is a sibling to <strong>Popover</strong>.
-				</p>
-				<p>
-					<strong>Popover</strong> aligns to the content within
-					parent.
-				</p>
-			</div>
-			<div
-				style={ {
-					height: '100vh',
-					width: '100%',
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
+		<div
+			style={ {
+				height: '200px',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			} }
+		>
+			<p
+				style={ { padding: '8px', background: 'salmon' } }
+				ref={ anchorRef }
 			>
-				<DraggableWrapper
-					style={ {
-						background: '#ddd',
-						border: '2px solid pink',
-						borderRadius: 4,
-						padding: 10,
-						userSelect: 'none',
-					} }
-				>
-					<div style={ { border: '2px solid cyan' } }>{ label }</div>
-					<Popover { ...restProps }>{ content }</Popover>
-				</DraggableWrapper>
-			</div>
+				Popover&apos;s anchor
+			</p>
+			<Popover { ...args } anchorRef={ anchorRef } />
 		</div>
 	);
 };
 
-export const positioning = () => {
-	const label = text( 'Example: Label', 'Drag Me!' );
-	const content = text( 'Example: Content', 'Popover' );
-	const noArrow = boolean( 'noArrow', false );
+export const Default = ( args ) => {
+	const [ isVisible, setIsVisible ] = useState( false );
+	const toggleVisible = () => {
+		setIsVisible( ( state ) => ! state );
+	};
 
 	return (
-		<DragExample label={ label } content={ content } noArrow={ noArrow } />
+		<div
+			style={ {
+				minWidth: '600px',
+				minHeight: '600px',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			<Button variant="secondary" onClick={ toggleVisible }>
+				Toggle Popover
+				{ isVisible && <Popover { ...args } /> }
+			</Button>
+		</div>
 	);
 };
+Default.args = {
+	children: <>Popover&apos;s&nbsp;content</>,
+};
 
-function DynamicHeightPopover() {
+/**
+ * Resize / scroll the viewport to test the behavior of the popovers when they
+ * reach the viewport boundaries.
+ */
+export const AllPlacements = ( { children, ...args } ) => (
+	<div
+		style={ {
+			minWidth: '600px',
+			marginLeft: 'auto',
+			marginRight: 'auto',
+		} }
+	>
+		<h2>
+			Resize / scroll the viewport to test the behavior of the popovers
+			when they reach the viewport boundaries.
+		</h2>
+		<div>
+			{ AVAILABLE_PLACEMENTS.map( ( p ) => (
+				<PopoverWithAnchor key={ p } placement={ p } { ...args }>
+					{ children }
+					<div>
+						<small>(placement: { p })</small>
+					</div>
+				</PopoverWithAnchor>
+			) ) }
+		</div>
+	</div>
+);
+// Excluding placement and position since they all possible values
+// are passed directly in code.
+AllPlacements.parameters = {
+	controls: {
+		exclude: [ 'placement', 'position' ],
+	},
+};
+AllPlacements.args = {
+	...Default.args,
+	noArrow: false,
+	offset: 10,
+};
+
+export const DynamicHeight = ( { children, ...args } ) => {
 	const [ height, setHeight ] = useState( 200 );
 	const increase = () => setHeight( height + 100 );
 	const decrease = () => setHeight( height - 100 );
@@ -146,7 +199,7 @@ function DynamicHeightPopover() {
 			</p>
 
 			<div>
-				<Popover>
+				<Popover { ...args }>
 					<div
 						style={ {
 							height,
@@ -154,14 +207,62 @@ function DynamicHeightPopover() {
 							padding: '20px',
 						} }
 					>
-						Content with dynamic height
+						{ children }
 					</div>
 				</Popover>
 			</div>
 		</div>
 	);
-}
+};
+DynamicHeight.args = {
+	...Default.args,
+	children: 'Content with dynamic height',
+};
+
+export const WithSlotOutsideIframe = ( args ) => {
+	const anchorRef = useRef( null );
+	const slotName = 'popover-with-slot-outside-iframe';
 
-export const dynamicHeight = () => {
-	return <DynamicHeightPopover />;
+	return (
+		<SlotFillProvider>
+			<div>
+				<Popover.Slot name={ slotName } />
+				<Iframe
+					style={ {
+						width: '100%',
+						height: '100%',
+					} }
+				>
+					<div
+						style={ {
+							height: '200vh',
+							paddingTop: '10vh',
+						} }
+					>
+						<p
+							style={ {
+								padding: '8px',
+								background: 'salmon',
+								maxWidth: '200px',
+								marginTop: '30px',
+								marginLeft: 'auto',
+								marginRight: 'auto',
+							} }
+							ref={ anchorRef }
+						>
+							Popover&apos;s anchor
+						</p>
+						<Popover
+							{ ...args }
+							__unstableSlotName={ slotName }
+							anchorRef={ anchorRef }
+						/>
+					</div>
+				</Iframe>
+			</div>
+		</SlotFillProvider>
+	);
+};
+WithSlotOutsideIframe.args = {
+	...Default.args,
 };

package/src/popover/style.scss

@@ -1,3 +1,5 @@
+$arrow-triangle-base-size: 14px;
+
 .components-popover {
 	z-index: z-index(".components-popover");
 
@@ -60,12 +62,64 @@
 
 .components-popover__arrow {
 	position: absolute;
-	background: $gray-400;
-	width: 8px;
-	height: 8px;
-	transform: rotate(45deg);
-	z-index: -1;
+	width: $arrow-triangle-base-size;
+	height: $arrow-triangle-base-size;
+	pointer-events: none;
+	display: flex;
+
+	// Thin line that helps to make sure that the underlying
+	// popover__content's outline is fully overlapped by the
+	// arrow
+	&::before {
+		content: "";
+		position: absolute;
+		top: -1px;
+		left: 1px;
+		height: 2px;
+		right: 1px;
+		background-color: $white;
+	}
+
+	// Position and rotate the arrow depending on the popover's placement.
+	// The `!important' is necessary to override the inline styles.
+	&.is-top {
+		bottom: -1 * $arrow-triangle-base-size !important;
+		transform: rotate(0);
+	}
+	&.is-right {
+		/*rtl:begin:ignore*/
+		left: -1 * $arrow-triangle-base-size !important;
+		transform: rotate(90deg);
+	}
+	&.is-bottom {
+		top: -1 * $arrow-triangle-base-size !important;
+		transform: rotate(180deg);
+	}
+	&.is-left {
+		/*rtl:begin:ignore*/
+		right: -1 * $arrow-triangle-base-size !important;
+		transform: rotate(-90deg);
+		/*rtl:end:ignore*/
+	}
+}
+
+.components-popover__triangle {
+	display: block;
+	flex: 1;
+}
+
+.components-popover__triangle-bg {
+	// Fill color is the same as the .components-popover__content's background
+	fill: $white;
+}
+
+.components-popover__triangle-border {
+	// Stroke colors are the same as the .components-popover__content's outline
+	fill: transparent;
+	stroke-width: $border-width;
+	stroke: $gray-400;
+
 	.is-alternate & {
-		background: $gray-900;
+		stroke: $gray-900;
 	}
 }

package/src/popover/test/index.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,4 +49,21 @@ describe( 'Popover', () => {
 
 		expect( result.container.querySelector( 'span' ) ).toMatchSnapshot();
 	} );
+
+	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>
+			);
+		};
+
+		render( <PopoverWithAnchor>Popover content</PopoverWithAnchor> );
+
+		expect( screen.getByText( 'Popover content' ) ).toBeInTheDocument();
+	} );
 } );

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

@@ -28,7 +28,6 @@ const thumbSize = 12;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
-	box-sizing: border-box;
 	align-items: flex-start;
 	display: inline-flex;
 	justify-content: flex-start;
@@ -45,7 +44,6 @@ const wrapperMargin = ( { marks }: WrapperProps ) =>
 	css( { marginBottom: marks ? 16 : undefined } );
 
 export const Wrapper = styled.div< WrapperProps >`
-	box-sizing: border-box;
 	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
@@ -81,7 +79,6 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
 
 export const Rail = styled.span`
 	background-color: ${ COLORS.lightGray[ 600 ] };
-	box-sizing: border-box;
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -108,7 +105,6 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 export const Track = styled.span`
 	background-color: currentColor;
 	border-radius: ${ railHeight }px;
-	box-sizing: border-box;
 	height: ${ railHeight }px;
 	pointer-events: none;
 	display: block;
@@ -120,7 +116,6 @@ export const Track = styled.span`
 `;
 
 export const MarksWrapper = styled.span`
-	box-sizing: border-box;
 	display: block;
 	pointer-events: none;
 	position: relative;
@@ -141,7 +136,6 @@ const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
 };
 
 export const Mark = styled.span`
-	box-sizing: border-box;
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
@@ -158,7 +152,6 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 };
 
 export const MarkLabel = styled.span`
-	box-sizing: border-box;
 	color: ${ COLORS.lightGray[ 600 ] };
 	left: 0;
 	font-size: 11px;
@@ -181,7 +174,6 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 
 export const ThumbWrapper = styled.span`
 	align-items: center;
-	box-sizing: border-box;
 	display: flex;
 	height: ${ thumbSize }px;
 	justify-content: center;
@@ -223,7 +215,6 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 export const Thumb = styled.span< ThumbProps >`
 	align-items: center;
 	border-radius: 50%;
-	box-sizing: border-box;
 	height: 100%;
 	outline: 0;
 	position: absolute;
@@ -272,7 +263,6 @@ const tooltipPosition = ( { position }: TooltipProps ) => {
 export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: 2px;
-	box-sizing: border-box;
 	color: white;
 	display: inline-block;
 	font-size: 12px;
@@ -298,7 +288,6 @@ export const Tooltip = styled.span< TooltipProps >`
 // @todo: Refactor RangeControl with latest HStack configuration
 // @wordpress/components/ui/hstack.
 export const InputNumber = styled( NumberControl )`
-	box-sizing: border-box;
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
@@ -312,7 +301,6 @@ export const InputNumber = styled( NumberControl )`
 `;
 
 export const ActionRightWrapper = styled.span`
-	box-sizing: border-box;
 	display: block;
 	margin-top: 0;
 

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -30,7 +30,7 @@ export const TooltipWrapper = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	background: ${ COLORS.ui.border };
+	background: ${ COLORS.gray[ 900 ] };
 	border-radius: 2px;
 	box-sizing: border-box;
 	font-size: 12px;

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

@@ -140,7 +140,6 @@ export const Select = styled.select< SelectProps >`
 export const DownArrowWrapper = styled.div`
 	align-items: center;
 	bottom: 0;
-	box-sizing: border-box;
 	display: flex;
 	padding: 0 4px;
 	pointer-events: none;

package/src/style-provider/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import memoize from 'memize';
+import * as uuid from 'uuid';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleProviderProps } from './types';
+
+const uuidCache = new Set();
+
+const memoizedCreateCacheWithContainer = memoize(
+	( container: HTMLElement ) => {
+		// Emotion only accepts alphabetical and hyphenated keys so we just
+		// strip the numbers from the UUID. It _should_ be fine.
+		let key = uuid.v4().replace( /[0-9]/g, '' );
+		while ( uuidCache.has( key ) ) {
+			key = uuid.v4().replace( /[0-9]/g, '' );
+		}
+		uuidCache.add( key );
+		return createCache( { container, key } );
+	}
+);
+
+export function StyleProvider( props: StyleProviderProps ) {
+	const { children, document } = props;
+
+	if ( ! document ) {
+		return null;
+	}
+
+	const cache = memoizedCreateCacheWithContainer( document.head );
+
+	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
+}
+
+export default StyleProvider;

package/src/style-provider/types.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type StyleProviderProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+	/**
+	 * Current document.
+	 */
+	document: Document;
+};

package/src/swatch/{index.js → index.tsx}

@@ -7,8 +7,11 @@ import { swatch } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../icon';
+import type { SwatchProps } from './types';
 
-function Swatch( { fill } ) {
+// This component will be deprecated. Use `ColorIndicator` instead.
+// TODO: Consolidate this component with `ColorIndicator`.
+function Swatch( { fill }: SwatchProps ) {
 	return fill ? (
 		<span className="components-swatch" style={ { background: fill } } />
 	) : (

package/src/swatch/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type SwatchProps = {
+	/**
+	 * The color to display in the swatch.
+	 */
+	fill?: CSSProperties[ 'background' ];
+};

package/src/text/hook.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import { isPlainObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -167,8 +166,11 @@ export default function useText( props ) {
 	 */
 	if ( ! truncate && Array.isArray( children ) ) {
 		content = Children.map( children, ( child ) => {
-			// @ts-ignore
-			if ( ! isPlainObject( child ) || ! ( 'props' in child ) ) {
+			if (
+				typeof child !== 'object' ||
+				child === null ||
+				! ( 'props' in child )
+			) {
 				return child;
 			}