@wordpress/components 35.1.1-next.v.202606191442.0 → 36.0.1

package/src/box-control/index.tsx

@@ -10,7 +10,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import { BaseControl } from '../base-control';
-import InputControl from './input-control';
+import BoxInputControl from './box-input-control';
 import LinkedButton from './linked-button';
 import { Grid } from '../grid';
 import {
@@ -27,7 +27,6 @@ import {
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type { BoxControlProps, BoxControlValue } from './types';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const defaultInputProps = {
 	min: 0,
@@ -58,17 +57,12 @@ function useUniqueId( idProp?: string ) {
  *   } );
  *
  *   return (
- *     <BoxControl
- *       __next40pxDefaultSize
- *       values={ values }
- *       onChange={ setValues }
- *     />
+ *     <BoxControl values={ values } onChange={ setValues } />
  *   );
  * };
  * ```
  */
 function BoxControl( {
-	__next40pxDefaultSize = false,
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
@@ -137,16 +131,10 @@ function BoxControl( {
 		setSelectedUnits,
 		sides,
 		values: inputValues,
-		__next40pxDefaultSize,
 		presets,
 		presetKey,
 	};
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'BoxControl',
-		__next40pxDefaultSize,
-		size: undefined,
-	} );
 	const sidesToRender = getAllowedSides( sides );
 
 	if ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {
@@ -170,9 +158,7 @@ function BoxControl( {
 			</BaseControl.VisualLabel>
 			{ isLinked && (
 				<InputWrapper>
-					{ /* Disable reason: the parent component is handling the __next40pxDefaultSize prop */ }
-					{ /* eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop */ }
-					<InputControl side="all" { ...inputControlProps } />
+					<BoxInputControl side="all" { ...inputControlProps } />
 				</InputWrapper>
 			) }
 			{ ! hasOneSide && (
@@ -187,9 +173,7 @@ function BoxControl( {
 			{ ! isLinked &&
 				splitOnAxis &&
 				[ 'vertical', 'horizontal' ].map( ( axis ) => (
-					// Disable reason: the parent component is handling the __next40pxDefaultSize prop
-					// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-					<InputControl
+					<BoxInputControl
 						key={ axis }
 						side={ axis as 'horizontal' | 'vertical' }
 						{ ...inputControlProps }
@@ -198,9 +182,7 @@ function BoxControl( {
 			{ ! isLinked &&
 				! splitOnAxis &&
 				Array.from( sidesToRender ).map( ( axis ) => (
-					// Disable reason: the parent component is handling the __next40pxDefaultSize prop
-					// eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
-					<InputControl
+					<BoxInputControl
 						key={ axis }
 						side={ axis }
 						{ ...inputControlProps }

package/src/box-control/stories/index.story.tsx

@@ -36,7 +36,7 @@ const meta: Meta< typeof BoxControl > = {
 export default meta;
 
 const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
-	return <BoxControl __next40pxDefaultSize { ...props } />;
+	return <BoxControl { ...props } />;
 };
 
 const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
@@ -44,7 +44,6 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 
 	return (
 		<BoxControl
-			__next40pxDefaultSize
 			values={ values }
 			{ ...props }
 			onChange={ ( nextValue ) => {
@@ -58,7 +57,6 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 export const Default = TemplateUncontrolled.bind( {} );
 Default.args = {
 	label: 'Label',
-	__next40pxDefaultSize: true,
 };
 
 export const Controlled = TemplateControlled.bind( {} );

package/src/box-control/test/index.tsx

@@ -29,7 +29,6 @@ const ControlledBoxControl = (
 
 	return (
 		<BoxControl
-			__next40pxDefaultSize
 			values={ state }
 			onChange={ ( next ) => setState( next ) }
 			{ ...extraProps }
@@ -42,7 +41,7 @@ const UncontrolledBoxControl = ( {
 	...props
 }: DistributiveOmit< BoxControlProps, 'onChange' > & {
 	onChange?: BoxControlProps[ 'onChange' ];
-} ) => <BoxControl __next40pxDefaultSize onChange={ onChange } { ...props } />;
+} ) => <BoxControl onChange={ onChange } { ...props } />;
 
 describe( 'BoxControl', () => {
 	describe( 'Basic rendering', () => {
@@ -474,4 +473,18 @@ describe( 'BoxControl', () => {
 			} );
 		} );
 	} );
+
+	describe( 'Placeholder', () => {
+		it( 'applies a consumer-supplied placeholder passed via inputProps', () => {
+			render(
+				<UncontrolledBoxControl
+					inputProps={ { placeholder: 'Inherited' } }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
+			).toHaveAttribute( 'placeholder', 'Inherited' );
+		} );
+	} );
 } );

package/src/box-control/types.ts

@@ -27,6 +27,13 @@ type UnitControlPassthroughProps = Omit<
 >;
 
 type DeprecatedBoxControlProps = {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * @deprecated Pass to the `inputProps` prop instead.
 	 * @ignore
@@ -94,12 +101,6 @@ export type BoxControlProps = Pick< UnitControlProps, 'units' > &
 		 * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 		 */
 		values?: BoxControlValue;
-		/**
-		 * Start opting into the larger default height that will become the default size in a future version.
-		 *
-		 * @default false
-		 */
-		__next40pxDefaultSize?: boolean;
 	} & (
 		| {
 				/**

package/src/card/test/__snapshots__/index.tsx.snap

@@ -281,14 +281,12 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-10 {
-  border: 0;
-  margin: 0;
-  border-bottom: 1px solid currentColor;
-  height: 0;
-  width: auto;
   box-sizing: border-box;
   display: block;
   width: 100%;
+}
+
+.emotion-11 {
   border-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -412,7 +410,7 @@ exports[`Card Card component should render correctly 1`] = `
       </div>
       <hr
         aria-orientation="horizontal"
-        class="components-divider components-card__divider components-card-divider emotion-10 emotion-11"
+        class="components-divider emotion-10 emotion-11 components-card__divider components-card-divider"
         data-wp-c16t="true"
         data-wp-component="CardDivider"
         role="separator"

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

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -13,14 +13,28 @@
+@@ -13,14 +13,29 @@
           <span
             class="components-checkbox-control__input-container"
           >
@@ -15,10 +15,11 @@ Snapshot Diff:
 +             id="inspector-checkbox-control-7"
               type="checkbox"
               value="1"
-+           />
+            />
 +           <svg
 +             aria-hidden="true"
 +             class="components-checkbox-control__indeterminate"
++             fill="currentColor"
 +             focusable="false"
 +             height="24"
 +             role="presentation"
@@ -28,7 +29,7 @@ Snapshot Diff:
 +           >
 +             <path
 +               d="M7 11.5h10V13H7z"
-              />
++             />
 +           </svg>
           </span>
         </div>

package/src/custom-select-control/test/index.tsx

@@ -483,7 +483,7 @@ describe.each( [
 			const customSelect = screen.getByRole( 'listbox', {
 				name: props.label,
 			} );
-			expect( customSelect ).toHaveFocus();
+			await waitFor( () => expect( customSelect ).toHaveFocus() );
 			await press.Enter();
 
 			expect( onKeyDown ).toHaveBeenCalledTimes( 0 );

package/src/disabled/README.md

@@ -15,7 +15,6 @@ const MyDisabled = () => {
 
 	let input = (
 		<TextControl
-			__next40pxDefaultSize
 			label="Input"
 			onChange={ () => {} }
 		/>

package/src/disabled/index.tsx

@@ -25,7 +25,6 @@ const { Consumer, Provider } = Context;
  *
  *	let input = (
  *		<TextControl
- *			__next40pxDefaultSize
  *			label="Input"
  *			onChange={ () => {} }
  *		/>

package/src/disabled/stories/index.story.tsx

@@ -46,7 +46,6 @@ const Form = () => {
 	return (
 		<VStack>
 			<TextControl
-				__next40pxDefaultSize
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }

package/src/divider/component.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -9,18 +10,41 @@ import type { ForwardedRef } from 'react';
  */
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import { DividerView } from './styles';
+import { space } from '../utils/space';
 import type { DividerProps } from './types';
+import styles from './style.module.scss';
 
 function UnconnectedDivider(
 	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const contextProps = useContextSystem( props, 'Divider' );
+	const {
+		className,
+		margin,
+		marginEnd,
+		marginStart,
+		style,
+		...contextProps
+	} = useContextSystem( props, 'Divider' );
+
+	const dividerStyle = { ...style };
+	const resolvedMarginStart = space( marginStart ?? margin );
+	const resolvedMarginEnd = space( marginEnd ?? margin );
+
+	if ( resolvedMarginStart ) {
+		dividerStyle[ '--wp-components-divider-margin-start' ] =
+			resolvedMarginStart;
+	}
+
+	if ( resolvedMarginEnd ) {
+		dividerStyle[ '--wp-components-divider-margin-end' ] =
+			resolvedMarginEnd;
+	}
 
 	return (
 		<Ariakit.Separator
-			render={ <DividerView /> }
+			className={ clsx( styles.divider, className ) }
+			style={ dividerStyle }
 			{ ...contextProps }
 			ref={ forwardedRef }
 		/>

package/src/divider/style.module.scss

@@ -0,0 +1,21 @@
+.divider {
+	border: 0;
+	margin: 0;
+
+	&[aria-orientation="horizontal"] {
+		border-block-end: 1px solid currentColor;
+		block-size: 0;
+		inline-size: auto;
+		margin-block-start: var(--wp-components-divider-margin-start, 0);
+		margin-block-end: var(--wp-components-divider-margin-end, 0);
+	}
+
+	&[aria-orientation="vertical"] {
+		display: inline;
+		border-inline-end: 1px solid currentColor;
+		block-size: auto;
+		inline-size: 0;
+		margin-inline-start: var(--wp-components-divider-margin-start, 0);
+		margin-inline-end: var(--wp-components-divider-margin-end, 0);
+	}
+}

package/src/divider/test/index.tsx

@@ -9,32 +9,42 @@ import { render, screen } from '@testing-library/react';
 import { Divider } from '..';
 
 describe( 'props', () => {
-	test( 'should render correctly', () => {
+	test( 'should render a horizontal separator by default', () => {
 		render( <Divider /> );
-		expect( screen.getByRole( 'separator' ) ).toMatchSnapshot();
+
+		const divider = screen.getByRole( 'separator' );
+		expect( divider ).toHaveAttribute( 'aria-orientation', 'horizontal' );
 	} );
 
 	test( 'should render marginStart', () => {
-		render( <Divider /> );
 		render( <Divider marginStart={ 5 } /> );
 
-		const dividers = screen.getAllByRole( 'separator' );
-		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+		expect( screen.getByRole( 'separator' ) ).toHaveStyle( {
+			'--wp-components-divider-margin-start': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render marginEnd', () => {
-		render( <Divider /> );
 		render( <Divider marginEnd={ 5 } /> );
 
-		const dividers = screen.getAllByRole( 'separator' );
-		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+		expect( screen.getByRole( 'separator' ) ).toHaveStyle( {
+			'--wp-components-divider-margin-end': 'calc(4px * 5)',
+		} );
 	} );
 
 	test( 'should render margin', () => {
-		render( <Divider /> );
 		render( <Divider margin={ 7 } /> );
 
-		const dividers = screen.getAllByRole( 'separator' );
-		expect( dividers[ 0 ] ).toMatchStyleDiffSnapshot( dividers[ 1 ] );
+		expect( screen.getByRole( 'separator' ) ).toHaveStyle( {
+			'--wp-components-divider-margin-start': 'calc(4px * 7)',
+			'--wp-components-divider-margin-end': 'calc(4px * 7)',
+		} );
+	} );
+
+	test( 'should render vertical orientation', () => {
+		render( <Divider orientation="vertical" /> );
+
+		const divider = screen.getByRole( 'separator' );
+		expect( divider ).toHaveAttribute( 'aria-orientation', 'vertical' );
 	} );
 } );

package/src/higher-order/with-constrained-tabbing/README.md

@@ -23,12 +23,10 @@ const MyComponentWithConstrainedTabbing = () => {
 	let form = (
 		<form>
 			<TextControl
-				__next40pxDefaultSize
 				label="Input 1"
 				onChange={ () => {} }
 			/>
 			<TextControl
-				__next40pxDefaultSize
 				label="Input 2"
 				onChange={ () => {} }
 			/>

package/src/higher-order/with-fallback-styles/index.tsx

@@ -6,19 +6,17 @@ import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { useState, useRef } from '@wordpress/element';
+import {
+	createHigherOrderComponent,
+	useIsomorphicLayoutEffect,
+} from '@wordpress/compose';
 
 type Props = {
 	node?: HTMLElement;
 	[ key: string ]: any;
 };
 
-type State = {
-	fallbackStyles?: { [ key: string ]: any };
-	grabStylesCompleted: boolean;
-};
-
 export default (
 	mapNodeToProps: (
 		node: HTMLElement,
@@ -26,69 +24,41 @@ export default (
 	) => { [ key: string ]: any }
 ) =>
 	createHigherOrderComponent( ( WrappedComponent ) => {
-		return class WithFallbackStyles extends Component< Props, State > {
-			nodeRef?: HTMLElement;
+		return function WithFallbackStyles( props: Props ) {
+			const [ fallbackStyles, setFallbackStyles ] = useState<
+				{ [ key: string ]: any } | undefined
+			>( undefined );
 
-			constructor( props: Props ) {
-				super( props );
-				this.nodeRef = this.props.node;
-				this.state = {
-					fallbackStyles: undefined,
-					grabStylesCompleted: false,
-				};
+			const nodeRef = useRef< HTMLDivElement >( null );
 
-				this.bindRef = this.bindRef.bind( this );
-			}
-
-			bindRef( node: HTMLDivElement ) {
-				if ( ! node ) {
-					return;
-				}
-				this.nodeRef = node;
-			}
+			// Runs before paint, so the fallback styles apply without a flash.
+			useIsomorphicLayoutEffect( () => {
+				const node = props.node ?? nodeRef.current;
+				// Derived from fallbackStyles: the grab is complete once every
+				// mapped value has resolved to a truthy style.
+				const grabStylesCompleted =
+					!! fallbackStyles &&
+					Object.values( fallbackStyles ).every( Boolean );
 
-			componentDidMount() {
-				this.grabFallbackStyles();
-			}
-
-			componentDidUpdate() {
-				this.grabFallbackStyles();
-			}
-
-			grabFallbackStyles() {
-				const { grabStylesCompleted, fallbackStyles } = this.state;
-				if ( this.nodeRef && ! grabStylesCompleted ) {
-					const newFallbackStyles = mapNodeToProps(
-						this.nodeRef,
-						this.props
-					);
+				if ( node && ! grabStylesCompleted ) {
+					const newFallbackStyles = mapNodeToProps( node, props );
 
 					if (
 						! fastDeepEqual( newFallbackStyles, fallbackStyles )
 					) {
-						this.setState( {
-							fallbackStyles: newFallbackStyles,
-							grabStylesCompleted:
-								Object.values( newFallbackStyles ).every(
-									Boolean
-								),
-						} );
+						setFallbackStyles( newFallbackStyles );
 					}
 				}
-			}
+			} );
+
+			const wrappedComponent = (
+				<WrappedComponent { ...props } { ...fallbackStyles } />
+			);
 
-			render() {
-				const wrappedComponent = (
-					<WrappedComponent
-						{ ...this.props }
-						{ ...this.state.fallbackStyles }
-					/>
-				);
-				return this.props.node ? (
-					wrappedComponent
-				) : (
-					<div ref={ this.bindRef }> { wrappedComponent } </div>
-				);
-			}
+			return props.node ? (
+				wrappedComponent
+			) : (
+				<div ref={ nodeRef }> { wrappedComponent } </div>
+			);
 		};
 	}, 'withFallbackStyles' );

package/src/higher-order/with-fallback-styles/test/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import withFallbackStyles from '..';
+
+describe( 'withFallbackStyles', () => {
+	const Wrapped = ( props: { fallbackColor?: string } ) => (
+		<div>{ props.fallbackColor ?? 'no-fallback' }</div>
+	);
+
+	it( 'derives the fallback styles from the provided node prop', () => {
+		const node = document.createElement( 'span' );
+		node.dataset.color = 'rgb(1, 2, 3)';
+		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+			fallbackColor: el.dataset.color,
+		} ) );
+		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );
+
+		render( <Component node={ node } /> );
+
+		// The rendered value proves the actual node was read by mapNodeToProps.
+		expect( mapNodeToProps ).toHaveBeenCalledWith(
+			node,
+			expect.objectContaining( { node } )
+		);
+		expect( screen.getByText( 'rgb(1, 2, 3)' ) ).toBeInTheDocument();
+	} );
+
+	it( 'derives the fallback styles from the internal wrapper node when no node prop is given', () => {
+		const mapNodeToProps = jest.fn( ( el: HTMLElement ) => ( {
+			fallbackColor: el.tagName.toLowerCase(),
+		} ) );
+		const Component = withFallbackStyles( mapNodeToProps )( Wrapped );
+
+		render( <Component /> );
+
+		// The HOC wraps in a <div>, so reading the node's tagName yields 'div'.
+		expect( mapNodeToProps ).toHaveBeenCalled();
+		expect( mapNodeToProps.mock.calls[ 0 ][ 0 ].tagName ).toBe( 'DIV' );
+		expect( screen.getByText( 'div' ) ).toBeInTheDocument();
+	} );
+} );

package/src/higher-order/with-focus-return/README.md

@@ -14,7 +14,6 @@ const EnhancedComponent = withFocusReturn( () => (
 	<div>
 		Focus will return to the previous input when this component is unmounted
 		<TextControl
-			__next40pxDefaultSize
 			autoFocus={ true }
 			onChange={ () => {} }
 		/>
@@ -31,7 +30,6 @@ const MyComponentWithFocusReturn = () => {
 	return (
 		<div>
 			<TextControl
-				__next40pxDefaultSize
 				placeholder="Type something"
 				value={ text }
 				onChange={ ( value ) => setText( value ) }

package/src/icon/stories/index.story.tsx

@@ -26,21 +26,6 @@ Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: StoryFn< typeof Icon > = ( args ) => {
-	return (
-		<div
-			style={ {
-				fill: 'blue',
-			} }
-		>
-			<Icon { ...args } />
-		</div>
-	);
-};
-FillColor.args = {
-	...Default.args,
-};
-
 /**
  * When `icon` is a function, it will be passed the `size` prop and any other additional props.
  */

package/src/menu/test/index.tsx

@@ -31,22 +31,6 @@ const resetTypeahead = () => {
 
 describe( 'Menu', () => {
 	let user: ReturnType< typeof userEvent.setup >;
-	let originalGetClientRects: () => DOMRectList;
-
-	beforeAll( () => {
-		// Code that considers focusability considers rects in whether the
-		// element is visible, but since jsdom does not simulate layout, we
-		// need to fake it. This should ideally be a global test mock to
-		// faithfully emulate a true browser environment.
-		originalGetClientRects = window.Element.prototype.getClientRects;
-		window.Element.prototype.getClientRects = jest.fn(
-			() => [ { width: 1, height: 1 } ] as unknown as DOMRectList
-		);
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
 
 	beforeEach( () => {
 		user = userEvent.setup();

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -20,6 +20,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
   <svg
     aria-hidden="true"
     class="components-menu-items__item-icon has-icon-right"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"
@@ -79,6 +80,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
   <svg
     aria-hidden="true"
     class="components-menu-items__item-icon has-icon-right"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"