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

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.

package/src/font-size-picker/font-size-picker-select.tsx

@@ -69,6 +69,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }
 			hideLabelFromVision

package/src/font-size-picker/index.tsx

@@ -212,6 +212,7 @@ const UnforwardedFontSizePicker = (
 						<FlexItem isBlock>
 							<UnitControl
 								__next40pxDefaultSize={ __next40pxDefaultSize }
+								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Custom' ) }
 								labelPosition="top"
 								hideLabelFromVision

package/src/font-size-picker/stories/index.story.tsx

@@ -17,7 +17,7 @@ const meta: Meta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/form-file-upload/README.md

@@ -1,95 +1,105 @@
 # FormFileUpload
 
-FormFileUpload is a component that allows users to select files from their local device.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-formfileupload--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+FormFileUpload allows users to select files from their local device.
 
 ```jsx
 import { FormFileUpload } from '@wordpress/components';
 
 const MyFormFileUpload = () => (
-	<FormFileUpload
-		accept="image/*"
-		onChange={ ( event ) => console.log( event.currentTarget.files ) }
-	>
-		Upload
-	</FormFileUpload>
+  <FormFileUpload
+    __next40pxDefaultSize
+    accept="image/*"
+    onChange={ ( event ) => console.log( event.currentTarget.files ) }
+  >
+    Upload
+  </FormFileUpload>
 );
 ```
-
 ## Props
 
-The component accepts the following props. Props not included in this set will be passed to the `Button` component.
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### accept
+### `accept`
 
-A string passed to `input` element that tells the browser which file types can be upload to the upload by the user use. e.g: `image/*,video/*`.
-More information about this string is available in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers.
+A string passed to the `input` element that tells the browser which
+[file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers)
+can be uploaded by the user. e.g: `image/*,video/*`.
 
--   Type: `String`
--   Required: No
+ - Type: `string`
+ - Required: No
 
-### children
+### `children`
 
 Children are passed as children of `Button`.
 
--   Type: `Boolean`
--   Required: No
+ - Type: `ReactNode`
+ - Required: No
 
-### icon
+### `icon`
 
-The icon to render. Supported values are: Dashicons (specified as strings), functions, Component instances and `null`.
+The icon to render in the default button.
 
--   Type: `String|Function|Component|null`
--   Required: No
--   Default: `null`
+See the `Icon` component docs for more information.
 
-### multiple
+ - Type: `IconType`
+ - Required: No
+
+### `multiple`
 
 Whether to allow multiple selection of files or not.
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### onChange
+### `onChange`
 
 Callback function passed directly to the `input` file element.
 
 Select files will be available in `event.currentTarget.files`.
 
--   Type: `Function`
--   Required: Yes
+ - Type: `ChangeEventHandler<HTMLInputElement>`
+ - Required: Yes
 
-### onClick
+### `onClick`
 
 Callback function passed directly to the `input` file element.
 
-This can be useful when you want to force a `change` event to fire when the user chooses the same file again. To do this, set the target value to an empty string in the `onClick` function.
+This can be useful when you want to force a `change` event to fire when
+the user chooses the same file again. To do this, set the target value to
+an empty string in the `onClick` function.
 
 ```jsx
 <FormFileUpload
-	onClick={ ( event ) => ( event.target.value = '' ) }
-	onChange={ onChange }
+  __next40pxDefaultSize
+  onClick={ ( event ) => ( event.target.value = '' ) }
+  onChange={ onChange }
 >
-	Upload
+  Upload
 </FormFileUpload>
 ```
 
--   Type: `Function`
--   Required: No
-
-### render
+ - Type: `MouseEventHandler<HTMLInputElement>`
+ - Required: No
 
-Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.
+### `render`
 
--   Type: `Function`
--   Required: No
+Optional callback function used to render the UI.
 
-### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
+If passed, the component does not render the default UI (a button) and
+calls this function to render it. The function receives an object with
+property `openFileDialog`, a function that, when called, opens the browser
+native file upload modal window.
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+ - Type: `(arg: { openFileDialog: () => void; }) => ReactNode`
+ - Required: No

package/src/form-file-upload/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "FormFileUpload",
+	"filePath": "./index.tsx"
+}