@wordpress/components 19.14.0 → 19.17.0

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, repeat, flatMap, compact } from 'lodash';
+import { unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -11,14 +11,14 @@ 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 flatMap( tree, ( treeNode ) => [
+	return tree.flatMap( ( treeNode ) => [
 		{
 			value: treeNode.id,
 			label:
-				repeat( '\u00A0', level * 3 ) + unescapeString( treeNode.name ),
+				'\u00A0'.repeat( level * 3 ) + unescapeString( treeNode.name ),
 		},
 		...getSelectOptions( treeNode.children || [], level + 1 ),
 	] );
@@ -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/form-group/types.ts

@@ -7,7 +7,7 @@ import type { CSSProperties, ReactNode, ReactText } from 'react';
  * Internal dependencies
  */
 import type { Props as ControlLabelProps } from '../control-label/types';
-import type { Props as GridProps } from '../../grid/types';
+import type { GridProps } from '../../grid/types';
 
 export type FormGroupLabelProps = ControlLabelProps & {
 	labelHidden?: boolean;

package/src/ui/tooltip/styles.js

@@ -20,6 +20,7 @@ export const TooltipContent = css`
 	outline: none;
 	transform-origin: top center;
 	transition: opacity ${ CONFIG.transitionDurationFastest } ease;
+	font-size: ${ CONFIG.fontSize };
 
 	&[data-enter] {
 		opacity: 1;

package/src/ui/tooltip/test/__snapshots__/index.js.snap

@@ -9,6 +9,7 @@ exports[`props should render correctly 1`] = `
   transform-origin: top center;
   -webkit-transition: opacity 100ms ease;
   transition: opacity 100ms ease;
+  font-size: 13px;
 }
 
 .emotion-0[data-enter] {

package/src/ui/utils/get-valid-children.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ReactNodeArray } from 'react';
+import type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,9 @@ import { Children, isValidElement } from '@wordpress/element';
  *
  * @return An array of available children.
  */
-export function getValidChildren( children: ReactNode ): ReactNodeArray {
+export function getValidChildren(
+	children: ReactNode
+): Array< ReactChild | ReactFragment | ReactPortal > {
 	if ( typeof children === 'string' ) return [ children ];
 
 	return Children.toArray( children ).filter( ( child ) =>

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/stories/index.tsx

@@ -24,9 +24,6 @@ const meta: ComponentMeta< typeof UnitControl > = {
 		__unstableStateReducer: {
 			control: { type: null },
 		},
-		size: {
-			control: { type: 'select' },
-		},
 		onChange: {
 			action: 'onChange',
 			control: { type: null },
@@ -54,16 +51,14 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	const [ value, setValue ] = useState< string | undefined >( '10px' );
 
 	return (
-		<div style={ { maxWidth: '100px' } }>
-			<UnitControl
-				{ ...args }
-				value={ value }
-				onChange={ ( v, extra ) => {
-					setValue( v );
-					onChange?.( v, extra );
-				} }
-			/>
-		</div>
+		<UnitControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v, extra ) => {
+				setValue( v );
+				onChange?.( v, extra );
+			} }
+		/>
 	);
 };
 
@@ -125,16 +120,14 @@ export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
 	const [ value, setValue ] = useState< string | undefined >( '80km' );
 
 	return (
-		<div style={ { maxWidth: '100px' } }>
-			<UnitControl
-				{ ...args }
-				value={ value }
-				onChange={ ( v, extra ) => {
-					setValue( v );
-					onChange?.( v, extra );
-				} }
-			/>
-		</div>
+		<UnitControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v, extra ) => {
+				setValue( v );
+				onChange?.( v, extra );
+			} }
+		/>
 	);
 };
 WithCustomUnits.args = {

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

@@ -6,9 +6,11 @@ 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';
+import { space } from '../../ui/utils/space';
 
 // Using `selectSize` instead of `size` to avoid a type conflict with the
 // `size` HTML attribute of the `select` element.
@@ -18,21 +20,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,61 +56,117 @@ export const ValueInput = styled( NumberControl )`
 			width: 100%;
 
 			${ arrowStyles };
-			${ paddingStyles };
 		}
 	}
 `;
 
-const baseUnitLabelStyles = css`
-	appearance: none;
-	background: transparent;
-	border-radius: 2px;
-	border: none;
-	box-sizing: border-box;
-	color: ${ COLORS.darkGray[ 500 ] };
-	display: block;
-	font-size: 8px;
-	letter-spacing: -0.5px;
-	outline: none;
-	padding: 2px 1px;
-	text-align-last: center;
-	text-transform: uppercase;
-	width: 20px;
-
-	${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
-`;
+const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
+	const sizes = {
+		default: css`
+			box-sizing: border-box;
+			padding: 2px 1px;
+			width: 20px;
+			color: ${ COLORS.darkGray[ 500 ] };
+			font-size: 8px;
+			line-height: 1;
+			letter-spacing: -0.5px;
+			text-transform: uppercase;
+			text-align-last: center;
+		`,
+		large: css`
+			box-sizing: border-box;
+			min-width: 24px;
+			max-width: 48px;
+			height: 24px;
+			margin-inline-end: ${ space( 2 ) };
+			padding: ${ space( 1 ) };
+			color: ${ COLORS.ui.theme };
+			font-size: 13px;
+			line-height: 1;
+			text-align-last: center;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		`,
+	};
+
+	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+};
 
 export const UnitLabel = styled.div< SelectProps >`
 	&&& {
 		pointer-events: none;
 
 		${ baseUnitLabelStyles };
+
+		color: ${ COLORS.gray[ 900 ] };
 	}
 `;
 
-export const UnitSelect = styled.select< SelectProps >`
-	&&& {
-		${ baseUnitLabelStyles };
-		cursor: pointer;
-		border: 1px solid transparent;
-		height: 100%;
+const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
+	const sizes = {
+		default: css`
+			height: 100%;
+			border: 1px solid transparent;
+			transition: box-shadow 0.1s linear, border 0.1s linear;
 
-		&:hover {
-			background-color: ${ COLORS.lightGray[ 300 ] };
-		}
+			${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
 
-		&:focus {
-			border-color: ${ COLORS.ui.borderFocus };
-			outline: 2px solid transparent;
-			outline-offset: 0;
-		}
+			&:not(:disabled):hover {
+				background-color: ${ COLORS.lightGray[ 300 ] };
+			}
 
-		&:disabled {
-			cursor: initial;
+			&:focus {
+				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;
+			}
+		`,
+		large: css`
+			display: flex;
+			justify-content: center;
+			align-items: center;
 
 			&:hover {
-				background-color: transparent;
+				color: ${ COLORS.ui.borderFocus };
+				box-shadow: inset 0 0 0
+					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
+				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode
+			}
+
+			&:focus {
+				box-shadow: 0 0 0
+					${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };
+				outline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode
 			}
+		`,
+	};
+
+	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+};
+
+export const UnitSelect = styled.select< SelectProps >`
+	// The && counteracts <select> styles in WP forms.css
+	&& {
+		appearance: none;
+		background: transparent;
+		border-radius: 2px;
+		border: none;
+		display: block;
+		outline: none;
+		/* Removing margin ensures focus styles neatly overlay the wrapper. */
+		margin: 0;
+		min-height: auto;
+		font-family: inherit;
+
+		&:not( :disabled ) {
+			cursor: pointer;
 		}
+
+		${ baseUnitLabelStyles };
+		${ unitSelectSizes };
 	}
 `;

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

@@ -43,7 +43,7 @@ export type UnitControlOnChangeCallback = InputChangeCallback<
 	{ data?: WPUnitControlUnit }
 >;
 
-export type UnitSelectControlProps = {
+export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	/**
 	 * Whether the control can be focused via keyboard navigation.
 	 *
@@ -54,12 +54,6 @@ export type UnitSelectControlProps = {
 	 * A callback function invoked when the value is changed.
 	 */
 	onChange?: UnitControlOnChangeCallback;
-	/**
-	 * Size of the control option. Supports "default" and "small".
-	 *
-	 * @default 'default'
-	 */
-	size?: SelectSize;
 	/**
 	 * Current unit.
 	 */
@@ -76,7 +70,7 @@ export type UnitSelectControlProps = {
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 	Pick<
 		InputControlProps,
-		'hideLabelFromVision' | '__next36pxDefaultSize'
+		'hideLabelFromVision' | 'prefix' | '__next36pxDefaultSize'
 	> & {
 		__unstableStateReducer?: StateReducer;
 		__unstableInputWidth?: CSSProperties[ 'width' ];

package/src/utils/base-label.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+// This is a very low-level mixin which you shouldn't have to use directly.
+// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
+export const baseLabelTypography = css`
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+`;

package/src/utils/box-sizing.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+export const boxSizingReset = css`
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+`;

package/src/utils/style-mixins.js

@@ -1,3 +1,4 @@
+export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
 export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
@@ -5,3 +6,4 @@ export { font } from './font';
 export { breakpoint } from './breakpoint';
 export { default as CONFIG } from './config-values';
 export { COLORS } from './colors-values';
+export { baseLabelTypography } from './base-label';