@wordpress/components 28.13.0 → 28.14.1-next.cd6172eb0.0

package/src/box-control/input-controls.tsx

@@ -108,6 +108,7 @@ export default function BoxInputControls( {
 						<Tooltip placement="top-end" text={ LABELS[ side ] }>
 							<StyledUnitControl
 								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								className="component-box-control__unit-control"
 								id={ inputId }

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

@@ -49,6 +49,7 @@ 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

@@ -15,11 +15,14 @@ import { useState } from '@wordpress/element';
 import BoxControl from '..';
 import type { BoxControlProps, BoxControlValue } from '../types';
 
-const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => {
+const ControlledBoxControl = (
+	extraProps: Omit< BoxControlProps, 'onChange' >
+) => {
 	const [ state, setState ] = useState< BoxControlValue >();
 
 	return (
 		<BoxControl
+			__next40pxDefaultSize
 			values={ state }
 			onChange={ ( next ) => setState( next ) }
 			{ ...extraProps }
@@ -27,10 +30,17 @@ const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => {
 	);
 };
 
+const UncontrolledBoxControl = ( {
+	onChange = () => {},
+	...props
+}: Omit< BoxControlProps, 'onChange' > & {
+	onChange?: BoxControlProps[ 'onChange' ];
+} ) => <BoxControl __next40pxDefaultSize onChange={ onChange } { ...props } />;
+
 describe( 'BoxControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render a box control input', () => {
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			expect(
 				screen.getByRole( 'group', { name: 'Box Control' } )
@@ -43,7 +53,7 @@ describe( 'BoxControl', () => {
 		it( 'should update values when interacting with input', async () => {
 			const user = userEvent.setup();
 
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
 
@@ -54,7 +64,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should update input values when interacting with slider', () => {
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const slider = screen.getByRole( 'slider' );
 
@@ -68,7 +78,7 @@ describe( 'BoxControl', () => {
 
 		it( 'should update slider values when interacting with input', async () => {
 			const user = userEvent.setup();
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -82,7 +92,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should render the number input with a default min value of 0', () => {
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
 
@@ -91,10 +101,7 @@ describe( 'BoxControl', () => {
 
 		it( 'should pass down `inputProps` to the underlying number input', () => {
 			render(
-				<BoxControl
-					onChange={ () => {} }
-					inputProps={ { min: 10, max: 50 } }
-				/>
+				<UncontrolledBoxControl inputProps={ { min: 10, max: 50 } } />
 			);
 
 			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
@@ -108,7 +115,7 @@ describe( 'BoxControl', () => {
 		it( 'should reset values when clicking Reset', async () => {
 			const user = userEvent.setup();
 
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -127,7 +134,7 @@ describe( 'BoxControl', () => {
 		it( 'should reset values when clicking Reset, if controlled', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -146,7 +153,7 @@ describe( 'BoxControl', () => {
 		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -166,7 +173,9 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 			const spyChange = jest.fn();
 
-			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
+			render(
+				<UncontrolledBoxControl onChange={ ( v ) => spyChange( v ) } />
+			);
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -196,7 +205,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a single side value when unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -224,7 +233,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a single side value when using slider unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -252,7 +261,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a whole axis when value is changed when unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example splitOnAxis /> );
+			render( <ControlledBoxControl splitOnAxis /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -276,7 +285,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a whole axis using a slider when value is changed when unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example splitOnAxis /> );
+			render( <ControlledBoxControl splitOnAxis /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -300,7 +309,7 @@ describe( 'BoxControl', () => {
 		it( 'should show "Mixed" label when sides have different values but are linked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			const unlinkButton = screen.getByRole( 'button', {
 				name: 'Unlink sides',
@@ -330,7 +339,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 
 			// Render control.
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			// Make unit selection on all input control.
 			await user.selectOptions(
@@ -362,7 +371,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 
 			// Render control.
-			const { rerender } = render( <BoxControl onChange={ () => {} } /> );
+			const { rerender } = render( <UncontrolledBoxControl /> );
 
 			// Make unit selection on all input control.
 			await user.selectOptions(
@@ -390,9 +399,7 @@ describe( 'BoxControl', () => {
 			} );
 
 			// Rerender with individual side value & confirm unit is selected.
-			rerender(
-				<BoxControl values={ { top: '2.5em' } } onChange={ () => {} } />
-			);
+			rerender( <UncontrolledBoxControl values={ { top: '2.5em' } } /> );
 
 			const rerenderedControls = screen.getAllByRole( 'combobox', {
 				name: 'Select unit',
@@ -414,7 +421,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <BoxControl onChange={ onChangeSpy } /> );
+			render( <UncontrolledBoxControl onChange={ onChangeSpy } /> );
 
 			const valueInput = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -443,7 +450,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 			const setState = jest.fn();
 
-			render( <BoxControl onChange={ setState } /> );
+			render( <UncontrolledBoxControl onChange={ setState } /> );
 
 			await user.selectOptions(
 				screen.getByRole( 'combobox', {

package/src/box-control/types.ts

@@ -17,70 +17,85 @@ export type CustomValueUnits = {
 
 type UnitControlPassthroughProps = Omit<
 	UnitControlProps,
-	'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units'
+	'label' | 'onChange' | 'onFocus' | 'units'
 >;
 
-export type BoxControlProps = Pick<
-	UnitControlProps,
-	'onMouseOver' | 'onMouseOut' | 'units'
-> & {
-	/**
-	 * If this property is true, a button to reset the box control is rendered.
-	 *
-	 * @default true
-	 */
-	allowReset?: boolean;
-	/**
-	 * The id to use as a base for the unique HTML id attribute of the control.
-	 */
-	id?: string;
-	/**
-	 * Props for the internal `UnitControl` components.
-	 *
-	 * @default { min: 0 }
-	 */
-	inputProps?: UnitControlPassthroughProps;
-	/**
-	 * Heading label for the control.
-	 *
-	 * @default __( 'Box Control' )
-	 */
-	label?: string;
+type DeprecatedBoxControlProps = {
 	/**
-	 * A callback function when an input value changes.
+	 * @deprecated Pass to the `inputProps` prop instead.
+	 * @ignore
 	 */
-	onChange: ( next: BoxControlValue ) => void;
+	onMouseOver?: UnitControlProps[ 'onMouseOver' ];
 	/**
-	 * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
-	 *
-	 * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
+	 * @deprecated Pass to the `inputProps` prop instead.
+	 * @ignore
 	 */
-	resetValues?: BoxControlValue;
-	/**
-	 * Collection of sides to allow control of. If omitted or empty, all sides will be available.
-	 *
-	 * Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
-	 */
-	sides?: readonly ( keyof BoxControlValue | 'horizontal' | 'vertical' )[];
-	/**
-	 * If this property is true, when the box control is unlinked, vertical and horizontal controls
-	 * can be used instead of updating individual sides.
-	 *
-	 * @default false
-	 */
-	splitOnAxis?: boolean;
-	/**
-	 * 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;
+	onMouseOut?: UnitControlProps[ 'onMouseOut' ];
 };
 
+export type BoxControlProps = Pick< UnitControlProps, 'units' > &
+	DeprecatedBoxControlProps & {
+		/**
+		 * If this property is true, a button to reset the box control is rendered.
+		 *
+		 * @default true
+		 */
+		allowReset?: boolean;
+		/**
+		 * The id to use as a base for the unique HTML id attribute of the control.
+		 */
+		id?: string;
+		/**
+		 * Props for the internal `UnitControl` components.
+		 *
+		 * @default { min: 0 }
+		 */
+		inputProps?: UnitControlPassthroughProps;
+		/**
+		 * Heading label for the control.
+		 *
+		 * @default __( 'Box Control' )
+		 */
+		label?: string;
+		/**
+		 * A callback function when an input value changes.
+		 */
+		onChange: ( next: BoxControlValue ) => void;
+		/**
+		 * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
+		 *
+		 * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
+		 */
+		resetValues?: BoxControlValue;
+		/**
+		 * Collection of sides to allow control of. If omitted or empty, all sides will be available.
+		 *
+		 * Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
+		 */
+		sides?: readonly (
+			| keyof BoxControlValue
+			| 'horizontal'
+			| 'vertical'
+		)[];
+		/**
+		 * If this property is true, when the box control is unlinked, vertical and horizontal controls
+		 * can be used instead of updating individual sides.
+		 *
+		 * @default false
+		 */
+		splitOnAxis?: boolean;
+		/**
+		 * 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;
+	};
+
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {
 	onChange?: ( nextValues: BoxControlValue ) => void;
 	onFocus?: (

package/src/clipboard-button/index.tsx

@@ -45,9 +45,11 @@ export default function ClipboardButton( {
 	} );
 
 	useEffect( () => {
-		if ( timeoutIdRef.current ) {
-			clearTimeout( timeoutIdRef.current );
-		}
+		return () => {
+			if ( timeoutIdRef.current ) {
+				clearTimeout( timeoutIdRef.current );
+			}
+		};
 	}, [] );
 
 	const classes = clsx( 'components-clipboard-button', className );

package/src/color-picker/input-with-slider.tsx

@@ -31,6 +31,7 @@ export const InputWithSlider = ( {
 	return (
 		<HStack spacing={ 4 }>
 			<NumberControlWrapper
+				__next40pxDefaultSize
 				min={ min }
 				max={ max }
 				label={ label }
@@ -45,7 +46,6 @@ export const InputWithSlider = ( {
 					</InputControlPrefixWrapper>
 				}
 				spinControls="none"
-				size="__unstable-large"
 			/>
 			<RangeControl
 				__nextHasNoMarginBottom

package/src/composite/item.tsx

@@ -26,23 +26,5 @@ export const CompositeItem = forwardRef<
 	// obfuscated to discourage its use outside of the component's internals.
 	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
 
-	// If the active item is not connected, Composite may end up in a state
-	// where none of the items are tabbable. In this case, we force all items to
-	// be tabbable, so that as soon as an item received focus, it becomes active
-	// and Composite goes back to working as expected.
-	const tabbable = Ariakit.useStoreState( store, ( state ) => {
-		return (
-			state?.activeId !== null &&
-			! store?.item( state?.activeId )?.element?.isConnected
-		);
-	} );
-
-	return (
-		<Ariakit.CompositeItem
-			store={ store }
-			tabbable={ tabbable }
-			{ ...props }
-			ref={ ref }
-		/>
-	);
+	return <Ariakit.CompositeItem store={ store } { ...props } ref={ ref } />;
 } );

package/src/custom-gradient-picker/index.tsx

@@ -140,6 +140,7 @@ const GradientTypePicker = ( {
 export function CustomGradientPicker( {
 	value,
 	onChange,
+	enableAlpha = true,
 	__experimentalIsRenderedInSidebar = false,
 }: CustomGradientPickerProps ) {
 	const { gradientAST, hasGradient } = getGradientAstWithDefault( value );
@@ -167,6 +168,7 @@ export function CustomGradientPicker( {
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}
+				disableAlpha={ ! enableAlpha }
 				background={ background }
 				hasGradient={ hasGradient }
 				value={ controlPoints }

package/src/custom-gradient-picker/types.ts

@@ -26,6 +26,12 @@ export type CustomGradientPickerProps = {
 	 * the `currentGradient` as an argument.
 	 */
 	onChange: ( currentGradient: string ) => void;
+	/**
+	 * Whether to enable alpha transparency options in the picker.
+	 *
+	 * @default true
+	 */
+	enableAlpha?: boolean;
 	/**
 	 * Whether this is rendered in the sidebar.
 	 *

package/src/custom-select-control/README.md

@@ -41,6 +41,7 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
+			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -52,6 +53,7 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
+			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }

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

@@ -18,6 +18,7 @@ import CustomSelectItem from '../custom-select-control-v2/item';
 import * as Styled from '../custom-select-control-v2/styles';
 import type { CustomSelectProps, CustomSelectOption } from './types';
 import { VisuallyHidden } from '../visually-hidden';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function useDeprecatedProps< T extends CustomSelectOption >( {
 	__experimentalShowSelectedHint,
@@ -56,6 +57,7 @@ function CustomSelectControl< T extends CustomSelectOption >(
 ) {
 	const {
 		__next40pxDefaultSize = false,
+		__shouldNotWarnDeprecated36pxSize,
 		describedBy,
 		options,
 		onChange,
@@ -66,6 +68,13 @@ function CustomSelectControl< T extends CustomSelectOption >(
 		...restProps
 	} = useDeprecatedProps( props );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'CustomSelectControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	const descriptionId = useInstanceId(
 		CustomSelectControl,
 		'custom-select-control__description'

package/src/custom-select-control/stories/index.story.tsx

@@ -63,6 +63,7 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	label: 'Label',
 	options: [
 		{

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

@@ -13,7 +13,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import UncontrolledCustomSelectControl from '..';
+import _CustomSelectControl from '..';
+
+const UncontrolledCustomSelectControl = (
+	props: React.ComponentProps< typeof _CustomSelectControl >
+) => <_CustomSelectControl __next40pxDefaultSize { ...props } />;
 
 const customClassName = 'amber-skies';
 const customStyles = {
@@ -716,7 +720,7 @@ describe( 'Type checking', () => {
 
 		const onChange = (): void => {};
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ options }
 			value={ {
@@ -726,7 +730,7 @@ describe( 'Type checking', () => {
 			onChange={ onChange }
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ options }
 			value={ {
@@ -736,7 +740,7 @@ describe( 'Type checking', () => {
 			onChange={ onChange }
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ options }
 			value={ {
@@ -748,7 +752,7 @@ describe( 'Type checking', () => {
 			onChange={ onChange }
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ options }
 			value={ {
@@ -764,7 +768,7 @@ describe( 'Type checking', () => {
 			}
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ optionsReadOnly }
 			value={ {
@@ -774,7 +778,7 @@ describe( 'Type checking', () => {
 			onChange={ onChange }
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ optionsReadOnly }
 			value={ {
@@ -785,7 +789,7 @@ describe( 'Type checking', () => {
 			onChange={ onChange }
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ optionsReadOnly }
 			value={ {
@@ -797,7 +801,7 @@ describe( 'Type checking', () => {
 			onChange={ onChange }
 		/>;
 
-		<UncontrolledCustomSelectControl
+		<_CustomSelectControl
 			label="Label"
 			options={ optionsReadOnly }
 			value={ {

package/src/custom-select-control/types.ts

@@ -120,4 +120,11 @@ export type CustomSelectProps< T extends CustomSelectOption > = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 };