@wordpress/components 25.7.0 → 25.8.0

package/src/popover/utils.ts

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
-import type { ReferenceType, VirtualElement } from '@floating-ui/react-dom';
+import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import type {
 
 const POSITION_TO_PLACEMENT: Record<
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	Placement
 > = {
 	bottom: 'bottom',
 	top: 'top',
@@ -79,8 +79,7 @@ const POSITION_TO_PLACEMENT: Record<
  */
 export const positionToPlacement = (
 	position: NonNullable< PopoverProps[ 'position' ] >
-): NonNullable< PopoverProps[ 'placement' ] > =>
-	POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
+) => POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
 
 /**
  * @typedef AnimationOrigin
@@ -139,58 +138,17 @@ export const placementToMotionAnimationProps = (
 	};
 };
 
-export const getReferenceOwnerDocument = ( {
-	anchor,
-	anchorRef,
-	anchorRect,
-	getAnchorRect,
-	fallbackReferenceElement,
-	fallbackDocument,
-}: Pick<
-	PopoverProps,
-	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
-> & {
-	fallbackReferenceElement: Element | null;
-	fallbackDocument: Document;
-} ): Document => {
-	// In floating-ui's terms:
-	// - "reference" refers to the popover's anchor element.
-	// - "floating" refers the floating popover's element.
-	// A floating element can also be positioned relative to a virtual element,
-	// instead of a real one. A virtual element is represented by an object
-	// with the `getBoundingClientRect()` function (like real elements).
-	// See https://floating-ui.com/docs/virtual-elements for more info.
-	let resultingReferenceOwnerDoc;
-	if ( ( anchor as VirtualElement )?.contextElement ) {
-		resultingReferenceOwnerDoc = ( anchor as VirtualElement ).contextElement
-			?.ownerDocument;
-	} else if ( anchor ) {
-		resultingReferenceOwnerDoc = anchor.ownerDocument;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
-		resultingReferenceOwnerDoc = ( anchorRef as PopoverAnchorRefTopBottom )
-			?.top.ownerDocument;
-	} else if ( ( anchorRef as Range | undefined )?.startContainer ) {
-		resultingReferenceOwnerDoc = ( anchorRef as Range ).startContainer
-			.ownerDocument;
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
-		resultingReferenceOwnerDoc = (
-			( anchorRef as PopoverAnchorRefReference ).current as Element
-		 ).ownerDocument;
-	} else if ( anchorRef as Element | undefined ) {
-		// This one should be deprecated.
-		resultingReferenceOwnerDoc = ( anchorRef as Element ).ownerDocument;
-	} else if ( anchorRect && anchorRect?.ownerDocument ) {
-		resultingReferenceOwnerDoc = anchorRect.ownerDocument;
-	} else if ( getAnchorRect ) {
-		resultingReferenceOwnerDoc = getAnchorRect(
-			fallbackReferenceElement
-		)?.ownerDocument;
-	}
+function isTopBottom(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefTopBottom {
+	return !! ( anchorRef as PopoverAnchorRefTopBottom )?.top;
+}
 
-	return resultingReferenceOwnerDoc ?? fallbackDocument;
-};
+function isRef(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefReference {
+	return !! ( anchorRef as PopoverAnchorRefReference )?.current;
+}
 
 export const getReferenceElement = ( {
 	anchor,
@@ -208,19 +166,15 @@ export const getReferenceElement = ( {
 
 	if ( anchor ) {
 		referenceElement = anchor;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
+	} else if ( isTopBottom( anchorRef ) ) {
 		// Create a virtual element for the ref. The expectation is that
 		// if anchorRef.top is defined, then anchorRef.bottom is defined too.
 		// Seems to be used by the block toolbar, when multiple blocks are selected
 		// (top and bottom blocks are used to calculate the resulting rect).
 		referenceElement = {
 			getBoundingClientRect() {
-				const topRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).top.getBoundingClientRect();
-				const bottomRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).bottom.getBoundingClientRect();
+				const topRect = anchorRef.top.getBoundingClientRect();
+				const bottomRect = anchorRef.bottom.getBoundingClientRect();
 				return new window.DOMRect(
 					topRect.x,
 					topRect.y,
@@ -229,12 +183,10 @@ export const getReferenceElement = ( {
 				);
 			},
 		};
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
+	} else if ( isRef( anchorRef ) ) {
 		// Standard React ref.
-		referenceElement = ( anchorRef as PopoverAnchorRefReference ).current;
-	} else if ( anchorRef as Element | undefined ) {
+		referenceElement = anchorRef.current;
+	} else if ( anchorRef ) {
 		// If `anchorRef` holds directly the element's value (no `current` key)
 		// This is a weird scenario and should be deprecated.
 		referenceElement = anchorRef as Element;

package/src/search-control/README.md

@@ -90,6 +90,13 @@ If true, the label will not be visible, but will be read by screen readers. Defa
 -   Type: `Boolean`
 -   Required: No
 
+#### `size`: `'default'` | `'compact'`
+
+The size of the component.
+
+-   Required: No
+-   Default: `'default'`
+
 ## Related components
 
 -   To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.

package/src/search-control/index.tsx

@@ -23,6 +23,7 @@ import type { ForwardedRef } from 'react';
 function UnforwardedSearchControl(
 	{
 		__nextHasNoMarginBottom,
+		__next40pxDefaultSize = false,
 		className,
 		onChange,
 		onKeyDown,
@@ -32,6 +33,7 @@ function UnforwardedSearchControl(
 		hideLabelFromVision = true,
 		help,
 		onClose,
+		size = 'default',
 		...restProps
 	}: WordPressComponentProps< SearchControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -44,9 +46,11 @@ function UnforwardedSearchControl(
 		if ( onClose ) {
 			return (
 				<Button
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					icon={ closeSmall }
 					label={ __( 'Close search' ) }
 					onClick={ onClose }
+					size={ size }
 				/>
 			);
 		}
@@ -54,12 +58,14 @@ function UnforwardedSearchControl(
 		if ( !! value ) {
 			return (
 				<Button
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					icon={ closeSmall }
 					label={ __( 'Reset search' ) }
 					onClick={ () => {
 						onChange( '' );
 						searchRef.current?.focus();
 					} }
+					size={ size }
 				/>
 			);
 		}
@@ -74,7 +80,10 @@ function UnforwardedSearchControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-search-control' ) }
+			className={ classnames( className, 'components-search-control', {
+				'is-next-40px-default-size': __next40pxDefaultSize,
+				'is-size-compact': size === 'compact',
+			} ) }
 		>
 			<div className="components-search-control__input-wrapper">
 				<input

package/src/search-control/style.scss

@@ -4,7 +4,7 @@
 	input[type="search"].components-search-control__input {
 		@include input-control;
 		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
+		padding: 0 $grid-unit-60 0 $grid-unit-20;
 		background: $gray-100;
 		border: none;
 		width: 100%;
@@ -36,21 +36,28 @@
 			-webkit-appearance: none;
 		}
 	}
+
+	&.is-next-40px-default-size input[type="search"].components-search-control__input {
+		height: $grid-unit-50;
+	}
+
+	&.is-size-compact input[type="search"].components-search-control__input {
+		height: $grid-unit-40;
+	}
+
 }
 
 .components-search-control__icon {
 	position: absolute;
-	top: 0;
-	width: $icon-size;
 	right: ( $grid-unit-60 - $icon-size ) * 0.5;
-	bottom: 0;
+	top: 50%;
+	transform: translateY(-50%);
+
 	display: flex;
 	align-items: center;
 	justify-content: center;
 
-	> svg {
-		margin: $grid-unit-10 0;
-	}
+	width: $icon-size;
 }
 
 .components-search-control__input-wrapper {

package/src/search-control/types.ts

@@ -40,4 +40,16 @@ export type SearchControlProps = Pick<
 	 * The current value of the input.
 	 */
 	value?: string;
+	/**
+	 * The size of the component
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

package/src/tab-panel/test/index.tsx

@@ -13,6 +13,7 @@ import { wordpress, category, media } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
+import cleanupTooltip from '../../tooltip/test/utils';
 
 const TABS = [
 	{
@@ -128,6 +129,8 @@ describe.each( [
 
 				await user.unhover( allTabs[ i ] );
 			}
+
+			await cleanupTooltip( user );
 		} );
 
 		it( 'should display a tooltip when moving the selection via the keyboard on tabs provided with an icon', async () => {
@@ -189,6 +192,8 @@ describe.each( [
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
+
+			await cleanupTooltip( user );
 		} );
 	} );
 

package/src/text/styles.js

@@ -34,7 +34,8 @@ export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
 		border-radius: 2px;
-		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
+		box-shadow:
+			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 	}
 `;

package/src/theme/README.md

@@ -40,8 +40,8 @@ If you would like your custom component to be themeable as a child of the `Theme
 -  Grayscale:
    -  `--wp-components-color-gray-100`: Used for light gray backgrounds.
    -  `--wp-components-color-gray-200`: Used sparingly for light borders.
-	 -	`--wp-components-color-gray-300`: Used for most borders.
-	 -	`--wp-components-color-gray-400`
-	 -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
-	 -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
-	 -	`--wp-components-color-gray-800`
+   -	`--wp-components-color-gray-300`: Used for most borders.
+   -	`--wp-components-color-gray-400`
+   -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
+   -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
+   -	`--wp-components-color-gray-800`