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

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-menu/index.tsx

@@ -164,6 +164,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (
 								<Button
+									__next40pxDefaultSize
 									key={ [
 										indexOfSet,
 										indexOfControl,

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/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/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"
+}

package/src/form-file-upload/index.tsx

@@ -9,15 +9,17 @@ import { useRef } from '@wordpress/element';
 import Button from '../button';
 import type { WordPressComponentProps } from '../context';
 import type { FormFileUploadProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 /**
- * FormFileUpload is a component that allows users to select files from their local device.
+ * FormFileUpload allows users to select files from their local device.
  *
  * ```jsx
  * import { FormFileUpload } from '@wordpress/components';
  *
  * const MyFormFileUpload = () => (
  *   <FormFileUpload
+ *     __next40pxDefaultSize
  *     accept="image/*"
  *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
  *   >
@@ -40,6 +42,15 @@ export function FormFileUpload( {
 		ref.current?.click();
 	};
 
+	if ( ! render ) {
+		maybeWarnDeprecated36pxSize( {
+			componentName: 'FormFileUpload',
+			__next40pxDefaultSize: props.__next40pxDefaultSize,
+			// @ts-expect-error - We don't "officially" support all Button props but this likely happens.
+			size: props.size,
+		} );
+	}
+
 	const ui = render ? (
 		render( { openFileDialog } )
 	) : (

package/src/form-file-upload/stories/index.story.tsx

@@ -36,6 +36,7 @@ const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
 export const Default = Template.bind( {} );
 Default.args = {
 	children: 'Select file',
+	__next40pxDefaultSize: true,
 };
 
 export const RestrictFileTypes = Template.bind( {} );

package/src/form-file-upload/test/index.tsx

@@ -7,13 +7,17 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import FormFileUpload from '..';
+import _FormFileUpload from '..';
 
 /**
  * Browser dependencies
  */
 const { File } = window;
 
+const FormFileUpload = (
+	props: React.ComponentProps< typeof _FormFileUpload >
+) => <_FormFileUpload __next40pxDefaultSize { ...props } />;
+
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {

package/src/form-file-upload/types.ts

@@ -17,10 +17,9 @@ export type FormFileUploadProps = {
 	 */
 	__next40pxDefaultSize?: boolean;
 	/**
-	 * 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/*`.
-	 *
-	 * @see 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/*`.
 	 */
 	accept?: InputHTMLAttributes< HTMLInputElement >[ 'accept' ];
 	/**
@@ -28,7 +27,9 @@ export type FormFileUploadProps = {
 	 */
 	children?: ReactNode;
 	/**
-	 * The icon to render in the `Button`.
+	 * The icon to render in the default button.
+	 *
+	 * See the `Icon` component docs for more information.
 	 */
 	icon?: ComponentProps< typeof Icon >[ 'icon' ];
 	/**
@@ -50,10 +51,11 @@ export type FormFileUploadProps = {
 	 *
 	 * ```jsx
 	 * <FormFileUpload
-	 * 	onClick={ ( event ) => ( event.target.value = '' ) }
-	 * 	onChange={ onChange }
+	 *   __next40pxDefaultSize
+	 *   onClick={ ( event ) => ( event.target.value = '' ) }
+	 *   onChange={ onChange }
 	 * >
-	 * 	Upload
+	 *   Upload
 	 * </FormFileUpload>
 	 * ```
 	 */

package/src/form-token-field/README.md

@@ -85,6 +85,7 @@ const MyFormTokenField = () => {
 
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			value={ selectedContinents }
 			suggestions={ continents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }

package/src/form-token-field/index.tsx

@@ -30,6 +30,7 @@ import {
 import { Spacer } from '../spacer';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const identity = ( value: string ) => value;
 
@@ -86,6 +87,12 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		} );
 	}
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'FormTokenField',
+		size: undefined,
+		__next40pxDefaultSize,
+	} );
+
 	const instanceId = useInstanceId( FormTokenField );
 
 	// We reset to these initial values again in the onBlur

package/src/form-token-field/stories/index.story.tsx

@@ -64,6 +64,7 @@ Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 };
 
 export const Async: StoryFn< typeof FormTokenField > = ( {
@@ -102,6 +103,7 @@ Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
 };
 
 export const DropdownSelector: StoryFn< typeof FormTokenField > =

package/src/form-token-field/test/index.tsx

@@ -21,7 +21,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import FormTokenField from '../';
+import _FormTokenField from '../';
+
+const FormTokenField = ( props: ComponentProps< typeof _FormTokenField > ) => (
+	<_FormTokenField __next40pxDefaultSize { ...props } />
+);
 
 const FormTokenFieldWithState = ( {
 	onChange,

package/src/gradient-picker/README.md

@@ -100,6 +100,14 @@ gradients from `gradients` will be shown.
  - Required: No
  - Default: `false`
 
+### `enableAlpha`
+
+Whether to enable alpha transparency options in the picker.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
+
 ### `gradients`
 
 An array of objects as predefined gradients displayed above the gradient

package/src/gradient-picker/index.tsx

@@ -213,6 +213,7 @@ export function GradientPicker( {
 	onChange,
 	value,
 	clearable = true,
+	enableAlpha = true,
 	disableCustomGradients = false,
 	__experimentalIsRenderedInSidebar,
 	headingLevel = 2,
@@ -230,6 +231,7 @@ export function GradientPicker( {
 					__experimentalIsRenderedInSidebar={
 						__experimentalIsRenderedInSidebar
 					}
+					enableAlpha={ enableAlpha }
 					value={ value }
 					onChange={ onChange }
 				/>

package/src/gradient-picker/types.ts

@@ -56,6 +56,12 @@ type GradientPickerBaseProps = {
 	 * @default true
 	 */
 	loop?: boolean;
+	/**
+	 * Whether to enable alpha transparency options in the picker.
+	 *
+	 * @default true
+	 */
+	enableAlpha?: boolean;
 } & (
 	| {
 			// TODO: [#54055] Either this or `aria-labelledby` should be required

package/src/menu/checkbox-item.tsx

@@ -16,30 +16,32 @@ import type { WordPressComponentProps } from '../context';
 import { MenuContext } from './context';
 import type { MenuCheckboxItemProps } from './types';
 import * as Styled from './styles';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 export const MenuCheckboxItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
 >( function MenuCheckboxItem(
-	{ suffix, children, onBlur, hideOnClick = false, ...props },
+	{ suffix, children, hideOnClick = false, ...props },
 	ref
 ) {
-	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
-	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const menuContext = useContext( MenuContext );
 
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.CheckboxItem can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuCheckboxItem
 			ref={ ref }
 			{ ...props }
-			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		>
 			<Ariakit.MenuItemCheck
-				store={ menuContext?.store }
+				store={ menuContext.store }
 				render={ <Styled.ItemPrefixWrapper /> }
 				// Override some ariakit inline styles
 				style={ { width: 'auto', height: 'auto' } }

package/src/menu/group-label.tsx

@@ -17,6 +17,13 @@ export const MenuGroupLabel = forwardRef<
 	WordPressComponentProps< MenuGroupLabelProps, 'div', false >
 >( function MenuGroup( props, ref ) {
 	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.GroupLabel can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuGroupLabel
 			ref={ ref }
@@ -31,7 +38,7 @@ export const MenuGroupLabel = forwardRef<
 				/>
 			}
 			{ ...props }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		/>
 	);
 } );

package/src/menu/group.tsx

@@ -16,11 +16,18 @@ export const MenuGroup = forwardRef<
 	WordPressComponentProps< MenuGroupProps, 'div', false >
 >( function MenuGroup( props, ref ) {
 	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Group can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuGroup
 			ref={ ref }
 			{ ...props }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		/>
 	);
 } );