@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.1-next.a9f418477.0

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,68 +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.
-	 */
-	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/button-group/stories/index.story.tsx

@@ -13,7 +13,7 @@ const meta: Meta< typeof ButtonGroup > = {
 	title: 'Components/ButtonGroup',
 	component: ButtonGroup,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -26,10 +26,10 @@ const meta: Meta< typeof Card > = {
 	id: 'components-card',
 	argTypes: {
 		as: {
-			control: { type: null },
+			control: false,
 		},
 		children: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof CheckboxControl > = {
 			action: 'onChange',
 		},
 		checked: {
-			control: { type: null },
+			control: false,
 		},
 		help: { control: { type: 'text' } },
 	},

package/src/circular-option-picker/circular-option-picker-actions.tsx

@@ -47,6 +47,7 @@ export function ButtonAction( {
 }: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
 	return (
 		<Button
+			__next40pxDefaultSize
 			className={ clsx(
 				'components-circular-option-picker__clear',
 				className

package/src/circular-option-picker/circular-option-picker-option.tsx

@@ -94,6 +94,7 @@ export function Option( {
 	const commonProps = {
 		id,
 		className: 'components-circular-option-picker__option',
+		__next40pxDefaultSize: true,
 		...additionalProps,
 	};
 

package/src/circular-option-picker/stories/index.story.tsx

@@ -32,8 +32,8 @@ const meta: Meta< typeof CircularOptionPicker > = {
 			CircularOptionPicker.DropdownLinkAction,
 	},
 	argTypes: {
-		actions: { control: { type: null } },
-		options: { control: { type: null } },
+		actions: { control: false },
+		options: { control: false },
 		children: { control: { type: 'text' } },
 	},
 	parameters: {

package/src/circular-option-picker/style.scss

@@ -67,8 +67,8 @@ $color-palette-circle-spacing: 12px;
 .components-circular-option-picker__option {
 	display: inline-block;
 	vertical-align: top;
-	height: 100%;
-	width: 100%;
+	height: 100% !important;
+	aspect-ratio: 1;
 	border: none;
 	border-radius: $radius-round;
 	background: transparent;

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

@@ -18,9 +18,9 @@ const meta: Meta< typeof ColorPalette > = {
 	id: 'components-colorpalette',
 	component: ColorPalette,
 	argTypes: {
-		as: { control: { type: null } },
-		onChange: { action: 'onChange', control: { type: null } },
-		value: { control: { type: null } },
+		as: { control: false },
+		onChange: { action: 'onChange', control: false },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -13,8 +13,8 @@ const meta: Meta< typeof ColorPicker > = {
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',
 	argTypes: {
-		as: { control: { type: null } },
-		color: { control: { type: null } },
+		as: { control: false },
+		color: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -38,7 +38,7 @@ const meta: Meta< typeof ComboboxControl > = {
 	id: 'components-comboboxcontrol',
 	component: ComboboxControl,
 	argTypes: {
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

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

@@ -36,9 +36,9 @@ const meta: Meta< typeof Composite > = {
 		'Composite.Context': Composite.Context,
 	},
 	argTypes: {
-		children: { control: { type: null } },
-		render: { control: { type: null } },
-		setActiveId: { control: { type: null } },
+		children: { control: false },
+		render: { control: false },
+		setActiveId: { control: false },
 		focusLoop: {
 			control: 'select',
 			options: [ true, false, 'horizontal', 'vertical', 'both' ],

package/src/confirm-dialog/stories/index.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta< typeof ConfirmDialog > = {
 	id: 'components-experimental-confirmdialog',
 	argTypes: {
 		isOpen: {
-			control: { type: null },
+			control: false,
 		},
 	},
 	parameters: {

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -66,6 +66,7 @@ function ControlPointButton( {
 				aria-describedby={ descriptionId }
 				aria-haspopup="true"
 				aria-expanded={ isOpen }
+				__next40pxDefaultSize
 				className={ clsx(
 					'components-custom-gradient-picker__control-point-button',
 					{
@@ -349,6 +350,7 @@ function InsertPoint( {
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					__next40pxDefaultSize
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ () => {

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/style.scss

@@ -47,7 +47,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
 		height: inherit;
 		width: inherit;
-		min-width: $grid-unit-20;
+		min-width: $grid-unit-20 !important;
 		border-radius: $radius-round;
 
 		background: $white;

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

@@ -18,8 +18,8 @@ const meta: Meta< typeof CustomSelectControl > = {
 	component: CustomSelectControl,
 	id: 'components-customselectcontrol',
 	argTypes: {
-		onChange: { control: { type: null } },
-		value: { control: { type: null } },
+		onChange: { control: false },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
@@ -63,6 +63,7 @@ const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	label: 'Label',
 	options: [
 		{