@wordpress/components 19.15.0 → 19.16.0

package/src/tooltip/index.js

@@ -13,8 +13,9 @@ import {
 	concatChildren,
 	useEffect,
 	useState,
+	useRef,
 } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
+import { useDebounce, useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -31,29 +32,45 @@ export const TOOLTIP_DELAY = 700;
 
 const eventCatcher = <div className="event-catcher" />;
 
-const getDisabledElement = ( { eventHandlers, child, childrenWithPopover } ) =>
-	cloneElement(
+const getDisabledElement = ( {
+	eventHandlers,
+	child,
+	childrenWithPopover,
+	mergedRefs,
+} ) => {
+	return cloneElement(
 		<span className="disabled-element-wrapper">
 			{ cloneElement( eventCatcher, eventHandlers ) }
 			{ cloneElement( child, {
 				children: childrenWithPopover,
+				ref: mergedRefs,
 			} ) }
 		</span>,
-		eventHandlers
+		{ ...eventHandlers }
 	);
+};
 
-const getRegularElement = ( { child, eventHandlers, childrenWithPopover } ) =>
-	cloneElement( child, {
+const getRegularElement = ( {
+	child,
+	eventHandlers,
+	childrenWithPopover,
+	mergedRefs,
+} ) => {
+	return cloneElement( child, {
 		...eventHandlers,
 		children: childrenWithPopover,
+		ref: mergedRefs,
 	} );
+};
 
 const addPopoverToGrandchildren = ( {
+	anchorRef,
 	grandchildren,
 	isOver,
+	offset,
 	position,
-	text,
 	shortcut,
+	text,
 } ) =>
 	concatChildren(
 		grandchildren,
@@ -64,7 +81,8 @@ const addPopoverToGrandchildren = ( {
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
-				offset={ 12 }
+				offset={ offset }
+				anchorRef={ anchorRef }
 				__unstableShift
 			>
 				{ text }
@@ -111,7 +129,23 @@ function Tooltip( props ) {
 	const [ isOver, setIsOver ] = useState( false );
 	const delayedSetIsOver = useDebounce( setIsOver, delay );
 
+	// Create a reference to the Tooltip's child, to be passed to the Popover
+	// so that the Tooltip can be correctly positioned. Also, merge with the
+	// existing ref for the first child, so that its ref is preserved.
+	const childRef = useRef( null );
+	const existingChildRef = Children.toArray( children )[ 0 ]?.ref;
+	const mergedChildRefs = useMergeRefs( [ childRef, existingChildRef ] );
+
 	const createMouseDown = ( event ) => {
+		// In firefox, the mouse down event is also fired when the select
+		// list is chosen.
+		// Cancel further processing because re-rendering of child components
+		// causes onChange to be triggered with the old value.
+		// See https://github.com/WordPress/gutenberg/pull/42483
+		if ( event.target.tagName === 'OPTION' ) {
+			return;
+		}
+
 		// Preserve original child callback behavior.
 		emitToChild( children, 'onMouseDown', event );
 
@@ -124,6 +158,15 @@ function Tooltip( props ) {
 	};
 
 	const createMouseUp = ( event ) => {
+		// In firefox, the mouse up event is also fired when the select
+		// list is chosen.
+		// Cancel further processing because re-rendering of child components
+		// causes onChange to be triggered with the old value.
+		// See https://github.com/WordPress/gutenberg/pull/42483
+		if ( event.target.tagName === 'OPTION' ) {
+			return;
+		}
+
 		emitToChild( children, 'onMouseUp', event );
 		document.removeEventListener( 'mouseup', cancelIsMouseDown );
 		setIsMouseDown( false );
@@ -150,7 +193,7 @@ function Tooltip( props ) {
 			// Mouse events behave unreliably in React for disabled elements,
 			// firing on mouseenter but not mouseleave.  Further, the default
 			// behavior for disabled elements in some browsers is to ignore
-			// mouse events. Don't bother trying to to handle them.
+			// mouse events. Don't bother trying to handle them.
 			//
 			// See: https://github.com/facebook/react/issues/4251
 			if ( event.currentTarget.disabled ) {
@@ -214,10 +257,12 @@ function Tooltip( props ) {
 		: getRegularElement;
 
 	const popoverData = {
+		anchorRef: childRef,
 		isOver,
+		offset: 4,
 		position,
-		text,
 		shortcut,
+		text,
 	};
 	const childrenWithPopover = addPopoverToGrandchildren( {
 		grandchildren,
@@ -228,6 +273,7 @@ function Tooltip( props ) {
 		child,
 		eventHandlers,
 		childrenWithPopover,
+		mergedRefs: mergedChildRefs,
 	} );
 }
 

package/src/tooltip/stories/index.js

@@ -35,19 +35,34 @@ export const _default = () => {
 	const position = select( 'Position', positionOptions, 'top center' );
 	const delay = number( 'Delay', 700 );
 	return (
-		<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-			<div
-				style={ {
-					margin: '50px auto',
-					width: '200px',
-					padding: '20px',
-					textAlign: 'center',
-					border: '1px solid #ccc',
-				} }
-			>
-				Hover for more information
-			</div>
-		</Tooltip>
+		<>
+			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
+				<div
+					style={ {
+						margin: '50px auto',
+						width: '200px',
+						padding: '20px',
+						textAlign: 'center',
+						border: '1px solid #ccc',
+					} }
+				>
+					Hover for more information
+				</div>
+			</Tooltip>
+			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
+				<div
+					style={ {
+						margin: '50px auto',
+						width: 'min-content',
+						padding: '4px',
+						textAlign: 'center',
+						border: '1px solid #ccc',
+					} }
+				>
+					Small target
+				</div>
+			</Tooltip>
+		</>
 	);
 };
 

package/src/tooltip/style.scss

@@ -2,7 +2,7 @@
 	z-index: z-index(".components-tooltip");
 
 	.components-popover__content {
-		min-width: 0;
+		min-width: min-content;
 	}
 }
 

package/src/tree-select/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { unescape as unescapeString, compact } from 'lodash';
+import { unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { SelectControl } from '../select-control';
-import type { TreeSelectProps, Tree, SelectOptions } from './types';
+import type { TreeSelectProps, Tree, SelectOptions, Truthy } from './types';
 
 function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
 	return tree.flatMap( ( treeNode ) => [
@@ -72,6 +72,7 @@ function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
  * }
  * ```
  */
+
 export function TreeSelect( {
 	label,
 	noOptionLabel,
@@ -81,10 +82,10 @@ export function TreeSelect( {
 	...props
 }: TreeSelectProps ) {
 	const options = useMemo( () => {
-		return compact( [
+		return [
 			noOptionLabel && { value: '', label: noOptionLabel },
 			...getSelectOptions( tree ),
-		] );
+		].filter( < T, >( option: T ): option is Truthy< T > => !! option );
 	}, [ noOptionLabel, tree ] );
 
 	return (

package/src/tree-select/types.ts

@@ -9,6 +9,10 @@ import type { ComponentProps } from 'react';
 import type SelectControl from '../select-control';
 import type { SelectControlProps } from '../select-control/types';
 
+export type Truthy< T > = T extends false | '' | 0 | null | undefined
+	? never
+	: T;
+
 export type SelectOptions = Required<
 	ComponentProps< typeof SelectControl >
 >[ 'options' ];

package/src/ui/context/test/context-system-provider.js

@@ -1,9 +1,14 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import styled from '@emotion/styled';
 
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -101,3 +106,98 @@ describe( 'props', () => {
 		expect( el.innerHTML ).not.toContain( 'WordPress.org' );
 	} );
 } );
+
+describe( 'children', () => {
+	test( 'should pass through children', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent>Pass through</ConnectedComponent>
+			</ContextSystemProvider>
+		);
+
+		expect( screen.getByText( 'Pass through' ) ).toBeInTheDocument();
+	} );
+
+	test( 'should not accept children via `context`', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		render(
+			<ContextSystemProvider
+				context={ { Component: { children: 'Override' } } }
+			>
+				<ConnectedComponent />
+			</ContextSystemProvider>
+		);
+
+		expect( screen.queryByText( 'Override' ) ).not.toBeInTheDocument();
+	} );
+
+	// This matches the behavior for normal, non-context-connected components.
+	test( 'should not override inherent children', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref }>
+				Inherent
+			</View>
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const NormalComponent = ( props ) => <div { ...props }>Inherent</div>;
+
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent />
+				<ConnectedComponent>Explicit children</ConnectedComponent>
+				<NormalComponent />
+				<NormalComponent>Explicit children</NormalComponent>
+			</ContextSystemProvider>
+		);
+
+		expect( screen.getAllByText( 'Inherent' ) ).toHaveLength( 4 );
+	} );
+
+	describe( 'when connected component does a `cloneElement()`', () => {
+		// eslint-disable-next-line no-unused-vars
+		const ComponentThatClones = ( { content, ...props }, _ref ) =>
+			cloneElement(
+				content,
+				useContextSystem( props, 'ComponentThatClones' )
+			);
+		const ConnectedComponentThatClones = contextConnect(
+			ComponentThatClones,
+			'ComponentThatClones'
+		);
+
+		test( 'should not override cloned inherent children with implicit `undefined` children', () => {
+			render(
+				<ContextSystemProvider>
+					<ConnectedComponentThatClones
+						content={ <span>Inherent</span> }
+					/>
+				</ContextSystemProvider>
+			);
+			expect( screen.getByText( 'Inherent' ) ).toBeInTheDocument();
+		} );
+
+		test( 'should override cloned inherent children with explicit children', () => {
+			render(
+				<ContextSystemProvider>
+					<ConnectedComponentThatClones
+						content={ <span>Inherent</span> }
+					>
+						Explicit children
+					</ConnectedComponentThatClones>
+				</ContextSystemProvider>
+			);
+			expect(
+				screen.getByText( 'Explicit children' )
+			).toBeInTheDocument();
+		} );
+	} );
+} );

package/src/ui/context/use-context-system.js

@@ -71,8 +71,13 @@ export function useContextSystem( props, namespace ) {
 		finalComponentProps[ key ] = overrideProps[ key ];
 	}
 
-	// @ts-ignore
-	finalComponentProps.children = rendered;
+	// Setting an `undefined` explicitly can cause unintended overwrites
+	// when a `cloneElement()` is involved.
+	if ( rendered !== undefined ) {
+		// @ts-ignore
+		finalComponentProps.children = rendered;
+	}
+
 	finalComponentProps.className = classes;
 
 	return finalComponentProps;

package/src/ui/utils/space.ts

@@ -1,5 +1,11 @@
 /**
- * A real number or something parsable as a number
+ * The argument value for the `space()` utility function.
+ *
+ * When this is a number or a numeric string, it will be interpreted as a
+ * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
+ *
+ * Otherwise, it will be interpreted as a literal CSS length value. For example,
+ * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
  */
 export type SpaceInput = number | string;
 

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

@@ -6,8 +6,9 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS, rtl } from '../../utils';
+import { COLORS, CONFIG, rtl } from '../../utils';
 import NumberControl from '../../number-control';
+import { BackdropUI } from '../../input-control/styles/input-control-styles';
 import type { SelectSize } from '../types';
 
 // Using `selectSize` instead of `size` to avoid a type conflict with the
@@ -18,21 +19,17 @@ type SelectProps = {
 
 type InputProps = {
 	disableUnits?: boolean;
-	size: SelectSize;
 };
 
 export const Root = styled.div`
 	box-sizing: border-box;
 	position: relative;
-`;
-
-const paddingStyles = ( { disableUnits }: InputProps ) => {
-	if ( disableUnits ) return '';
 
-	return css`
-		${ rtl( { paddingRight: 8 } )() };
-	`;
-};
+	/* Target the InputControl's backdrop and make focus styles smoother. */
+	&&& ${ BackdropUI } {
+		transition: box-shadow 0.1s linear;
+	}
+`;
 
 const arrowStyles = ( { disableUnits }: InputProps ) => {
 	if ( disableUnits ) return '';
@@ -58,7 +55,6 @@ export const ValueInput = styled( NumberControl )`
 			width: 100%;
 
 			${ arrowStyles };
-			${ paddingStyles };
 		}
 	}
 `;
@@ -96,15 +92,21 @@ export const UnitSelect = styled.select< SelectProps >`
 		cursor: pointer;
 		border: 1px solid transparent;
 		height: 100%;
+		/* Removing margin ensures focus styles neatly overlay the wrapper. */
+		margin: 0;
+		transition: box-shadow 0.1s linear, border 0.1s linear;
 
 		&:hover {
 			background-color: ${ COLORS.lightGray[ 300 ] };
 		}
 
 		&:focus {
-			border-color: ${ COLORS.ui.borderFocus };
-			outline: 2px solid transparent;
+			border: 1px solid ${ COLORS.ui.borderFocus };
+			box-shadow: inset 0 0 0 ${ CONFIG.borderWidth }
+				${ COLORS.ui.borderFocus };
 			outline-offset: 0;
+			outline: 2px solid transparent;
+			z-index: 1;
 		}
 
 		&:disabled {

package/src/unit-control/test/__snapshots__/index.tsx.snap

@@ -7,11 +7,11 @@ Snapshot Diff:
 
 @@ -1,10 +1,10 @@
   <div
-    class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33"
+    class="components-unit-control-wrapper css-zi0c81-Root e1bagdl33"
   >
     <div
--     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
-+     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-1njfmeu-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Flex"
     >
@@ -22,7 +22,7 @@ Snapshot Diff:
       >
         <input
           autocomplete="off"
-          class="components-input-control__input css-gzm6eu-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+          class="components-input-control__input css-1hsyo1w-Input-dragStyles-fontSizeStyles-sizeStyles-customPaddings em5sgkm5"
 -         id="inspector-input-control-1"
 +         id="inspector-input-control-2"
           inputmode="numeric"

package/src/unit-control/types.ts

@@ -76,7 +76,7 @@ export type UnitSelectControlProps = {
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 	Pick<
 		InputControlProps,
-		'hideLabelFromVision' | '__next36pxDefaultSize'
+		'hideLabelFromVision' | 'prefix' | '__next36pxDefaultSize'
 	> & {
 		__unstableStateReducer?: StateReducer;
 		__unstableInputWidth?: CSSProperties[ 'width' ];