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

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'
@@ -145,11 +154,11 @@ function CustomSelectControl< T extends CustomSelectOption >(
 	const renderSelectedValueHint = () => {
 		const selectedOptionHint = options
 			?.map( applyOptionDeprecations )
-			?.find( ( { name } ) => currentValue === name )?.hint;
+			?.find( ( { name } ) => store.getState().value === name )?.hint;
 
 		return (
 			<Styled.SelectedExperimentalHintWrapper>
-				{ currentValue }
+				{ store.getState().value }
 				{ selectedOptionHint && (
 					<Styled.SelectedExperimentalHintItem
 						// Keeping the classname for legacy reasons

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: [
 		{

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;
 };

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

@@ -22,8 +22,8 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 		'CustomSelectControlV2.Item': CustomSelectControlV2.Item,
 	},
 	argTypes: {
-		children: { control: { type: null } },
-		value: { control: { type: null } },
+		children: { control: false },
+		value: { control: false },
 	},
 	tags: [ 'status-wip' ],
 	parameters: {

package/src/date-time/stories/date-time.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta< typeof DateTimePicker > = {
 	component: DateTimePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
-		onChange: { action: 'onChange', control: { type: null } },
+		onChange: { action: 'onChange', control: false },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -51,6 +51,9 @@ const Template: StoryFn< typeof DateTimePicker > = ( {
 };
 
 export const Default: StoryFn< typeof DateTimePicker > = Template.bind( {} );
+Default.args = {
+	currentDate: new Date(),
+};
 
 export const WithEvents: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 WithEvents.args = {

package/src/date-time/stories/date.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta< typeof DatePicker > = {
 	component: DatePicker,
 	argTypes: {
 		currentDate: { control: 'date' },
-		onChange: { action: 'onChange', control: { type: null } },
+		onChange: { action: 'onChange', control: false },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -51,6 +51,9 @@ const Template: StoryFn< typeof DatePicker > = ( {
 };
 
 export const Default: StoryFn< typeof DatePicker > = Template.bind( {} );
+Default.args = {
+	currentDate: new Date(),
+};
 
 export const WithEvents: StoryFn< typeof DatePicker > = Template.bind( {} );
 WithEvents.args = {

package/src/date-time/stories/time.story.tsx

@@ -21,7 +21,7 @@ const meta: Meta< typeof TimePicker > = {
 	subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },
 	argTypes: {
 		currentTime: { control: 'date' },
-		onChange: { action: 'onChange', control: { type: null } },
+		onChange: { action: 'onChange', control: false },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -52,6 +52,9 @@ const Template: StoryFn< typeof TimePicker > = ( {
 };
 
 export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );
+Default.args = {
+	currentTime: new Date(),
+};
 
 const TimeInputTemplate: StoryFn< typeof TimePicker.TimeInput > = ( args ) => {
 	return <TimePicker.TimeInput { ...args } />;

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof DimensionControl > = {
 	id: 'components-dimensioncontrol',
 	argTypes: {
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 		icon: {
 			control: { type: 'select' },
 			options: [ '-', 'desktop', 'tablet', 'mobile' ],

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

@@ -22,8 +22,8 @@ const meta: Meta< typeof Disabled > = {
 	id: 'components-disabled',
 	component: Disabled,
 	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
+		as: { control: false },
+		children: { control: false },
 	},
 	parameters: {
 		controls: {
@@ -82,7 +82,7 @@ Default.args = {
 export const ContentEditable: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
-			<div contentEditable tabIndex={ 0 }>
+			<div contentEditable tabIndex={ 0 } suppressContentEditableWarning>
 				contentEditable
 			</div>
 		</Disabled>

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

@@ -24,7 +24,7 @@ const meta: Meta< typeof Divider > = {
 			control: { type: 'text' },
 		},
 		wrapElement: {
-			control: { type: null },
+			control: false,
 		},
 		ref: {
 			table: {

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

@@ -21,8 +21,8 @@ const meta: Meta< typeof Draggable > = {
 	title: 'Components/Utilities/Draggable',
 	id: 'components-draggable',
 	argTypes: {
-		elementId: { control: { type: null } },
-		__experimentalDragComponent: { control: { type: null } },
+		elementId: { control: false },
+		__experimentalDragComponent: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/drop-zone/index.tsx

@@ -15,7 +15,7 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import type { DropType, DropZoneProps } from './types';
+import type { DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 /**
@@ -47,19 +47,22 @@ export function DropZoneComponent( {
 	onFilesDrop,
 	onHTMLDrop,
 	onDrop,
+	isEligible = () => true,
 	...restProps
 }: WordPressComponentProps< DropZoneProps, 'div', false > ) {
 	const [ isDraggingOverDocument, setIsDraggingOverDocument ] =
 		useState< boolean >();
 	const [ isDraggingOverElement, setIsDraggingOverElement ] =
 		useState< boolean >();
-	const [ type, setType ] = useState< DropType >();
+	const [ isActive, setIsActive ] = useState< boolean >();
 	const ref = useDropZone( {
 		onDrop( event ) {
-			const files = event.dataTransfer
-				? getFilesFromDataTransfer( event.dataTransfer )
-				: [];
-			const html = event.dataTransfer?.getData( 'text/html' );
+			if ( ! event.dataTransfer ) {
+				return;
+			}
+
+			const files = getFilesFromDataTransfer( event.dataTransfer );
+			const html = event.dataTransfer.getData( 'text/html' );
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
@@ -76,32 +79,31 @@ export function DropZoneComponent( {
 		onDragStart( event ) {
 			setIsDraggingOverDocument( true );
 
-			let _type: DropType = 'default';
+			if ( ! event.dataTransfer ) {
+				return;
+			}
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
 			 * The order of the checks is important to recognize the HTML drop.
 			 */
-			if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
-				_type = 'html';
+			if ( event.dataTransfer.types.includes( 'text/html' ) ) {
+				setIsActive( !! onHTMLDrop );
 			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
-				event.dataTransfer?.types.includes( 'Files' ) ||
-				( event.dataTransfer
-					? getFilesFromDataTransfer( event.dataTransfer )
-					: []
-				).length > 0
+				event.dataTransfer.types.includes( 'Files' ) ||
+				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
-				_type = 'file';
+				setIsActive( !! onFilesDrop );
+			} else {
+				setIsActive( !! onDrop && isEligible( event.dataTransfer ) );
 			}
-
-			setType( _type );
 		},
 		onDragEnd() {
 			setIsDraggingOverElement( false );
 			setIsDraggingOverDocument( false );
-			setType( undefined );
+			setIsActive( undefined );
 		},
 		onDragEnter() {
 			setIsDraggingOverElement( true );
@@ -112,14 +114,9 @@ export function DropZoneComponent( {
 	} );
 
 	const classes = clsx( 'components-drop-zone', className, {
-		'is-active':
-			( isDraggingOverDocument || isDraggingOverElement ) &&
-			( ( type === 'file' && onFilesDrop ) ||
-				( type === 'html' && onHTMLDrop ) ||
-				( type === 'default' && onDrop ) ),
+		'is-active': isActive,
 		'is-dragging-over-document': isDraggingOverDocument,
 		'is-dragging-over-element': isDraggingOverElement,
-		[ `is-dragging-${ type }` ]: !! type,
 	} );
 
 	return (

package/src/drop-zone/types.ts

@@ -26,4 +26,9 @@ export type DropZoneProps = {
 	 * It receives the HTML being dropped as an argument.
 	 */
 	onHTMLDrop?: ( html: string ) => void;
+	/**
+	 * A function to determine if the drop zone is eligible to handle the drop
+	 * data transfer items.
+	 */
+	isEligible?: ( dataTransfer: DataTransfer ) => boolean;
 };

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

@@ -25,13 +25,13 @@ const meta: Meta< typeof Dropdown > = {
 				type: 'radio',
 			},
 		},
-		position: { control: { type: null } },
-		renderContent: { control: { type: null } },
-		renderToggle: { control: { type: null } },
-		open: { control: { type: null } },
-		defaultOpen: { control: { type: null } },
-		onToggle: { control: { type: null } },
-		onClose: { control: { type: null } },
+		position: { control: false },
+		renderContent: { control: false },
+		renderToggle: { control: false },
+		open: { control: false },
+		defaultOpen: { control: false },
+		onToggle: { control: false },
+		onClose: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/dropdown-menu/index.tsx

@@ -164,11 +164,14 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (
 								<Button
+									__next40pxDefaultSize
 									key={ [
 										indexOfSet,
 										indexOfControl,
 									].join() }
-									onClick={ ( event ) => {
+									onClick={ (
+										event: React.MouseEvent< HTMLButtonElement >
+									) => {
 										event.stopPropagation();
 										props.onClose();
 										if ( control.onClick ) {

package/src/dropdown-menu/stories/index.story.tsx

@@ -37,9 +37,9 @@ const meta: Meta< typeof DropdownMenu > = {
 			mapping: { menu, chevronDown, more },
 			control: { type: 'select' },
 		},
-		open: { control: { type: null } },
-		defaultOpen: { control: { type: null } },
-		onToggle: { control: { type: null } },
+		open: { control: false },
+		defaultOpen: { control: false },
+		onToggle: { control: false },
 	},
 };
 export default meta;

package/src/dropdown-menu/style.scss

@@ -53,7 +53,7 @@
 
 	.components-menu-item__button,
 	.components-menu-item__button.components-button {
-		min-height: $button-size;
+		min-height: $button-size-next-default-40px;
 		height: auto;
 		text-align: left;
 		padding-left: $grid-unit-10;

package/src/duotone-picker/color-list-picker/index.tsx

@@ -12,7 +12,6 @@ import Button from '../../button';
 import ColorPalette from '../../color-palette';
 import ColorIndicator from '../../color-indicator';
 import Icon from '../../icon';
-import { HStack } from '../../h-stack';
 import type { ColorListPickerProps, ColorOptionProps } from './types';
 import { useInstanceId } from '@wordpress/compose';
 
@@ -32,23 +31,24 @@ function ColorOption( {
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="components-color-list-picker__swatch-button"
+				id={ labelId }
 				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
 				aria-expanded={ isOpen }
 				aria-controls={ contentId }
-			>
-				<HStack justify="flex-start" spacing={ 2 }>
-					{ value ? (
+				icon={
+					value ? (
 						<ColorIndicator
 							colorValue={ value }
 							className="components-color-list-picker__swatch-color"
 						/>
 					) : (
 						<Icon icon={ swatch } />
-					) }
-					<span id={ labelId }>{ label }</span>
-				</HStack>
-			</Button>
+					)
+				}
+				text={ label }
+			/>
 			<div
 				role="group"
 				id={ contentId }

package/src/duotone-picker/color-list-picker/style.scss

@@ -7,12 +7,6 @@
 	margin: $grid-unit-10 0;
 }
 
-.components-color-list-picker__swatch-button {
-	// Used to simulate styles as a .button.has-icon (which this component can't
-	// opt into, because it has to show more than a simple SVG as the "icon")
-	padding: 6px;
-}
-
 .components-color-list-picker__swatch-color {
 	// Match the 24px size of the `swatch` icon (used when no color is set)
 	margin: 2px;

package/src/duotone-picker/stories/duotone-picker.story.tsx

@@ -19,7 +19,7 @@ const meta: Meta< typeof DuotonePicker > = {
 	component: DuotonePicker,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -17,7 +17,7 @@ const meta: Meta< typeof Flex > = {
 	argTypes: {
 		align: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
-		children: { control: { type: null } },
+		children: { control: false },
 		gap: { control: { type: 'text' } },
 		justify: { control: { type: 'text' } },
 		// Disabled isReversed because it's deprecated.