+
{ disableMotion ? (
children
) : (
@@ -158,3 +191,5 @@ export default function DropZoneComponent( {
);
}
+
+export default DropZoneComponent;
diff --git a/packages/components/src/drop-zone/provider.js b/packages/components/src/drop-zone/provider.ts
similarity index 76%
rename from packages/components/src/drop-zone/provider.js
rename to packages/components/src/drop-zone/provider.ts
index e9924489315f76..97109d845434b6 100644
--- a/packages/components/src/drop-zone/provider.js
+++ b/packages/components/src/drop-zone/provider.ts
@@ -3,7 +3,11 @@
*/
import deprecated from '@wordpress/deprecated';
-export default function DropZoneProvider( { children } ) {
+export default function DropZoneProvider( {
+ children,
+}: {
+ children: React.ReactNode;
+} ) {
deprecated( 'wp.components.DropZoneProvider', {
since: '5.8',
hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
diff --git a/packages/components/src/drop-zone/stories/index.tsx b/packages/components/src/drop-zone/stories/index.tsx
new file mode 100644
index 00000000000000..de94c98e4be031
--- /dev/null
+++ b/packages/components/src/drop-zone/stories/index.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import DropZone from '..';
+
+const meta: ComponentMeta< typeof DropZone > = {
+ component: DropZone,
+ title: 'Components/DropZone',
+ parameters: {
+ actions: { argTypesRegex: '^on.*' },
+ controls: { expanded: true },
+ docs: { source: { state: 'open' } },
+ },
+};
+export default meta;
+
+const Template: ComponentStory< typeof DropZone > = ( props ) => {
+ return (
+
+ Drop something here
+
+
+ );
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts
new file mode 100644
index 00000000000000..3982889a4f3eac
--- /dev/null
+++ b/packages/components/src/drop-zone/types.ts
@@ -0,0 +1,29 @@
+export type DropType = 'file' | 'html' | 'default';
+
+export type DropZoneProps = {
+ /**
+ * A CSS `class` to give to the wrapper element.
+ */
+ className?: string;
+ /**
+ * A string to be shown within the drop zone area.
+ *
+ * @default `__( 'Drop files to upload' )`
+ */
+ label?: string;
+ /**
+ * The function is generic drop handler called if the `onFilesDrop` or `onHTMLDrop` are not called.
+ * It receives the drop `event` object as an argument.
+ */
+ onDrop?: ( event: DragEvent ) => void;
+ /**
+ * The function is called when dropping a file into the `DropZone`.
+ * It receives an array of dropped files as an argument.
+ */
+ onFilesDrop?: ( files: File[] ) => void;
+ /**
+ * The function is called when dropping HTML into the `DropZone`.
+ * It receives the HTML being dropped as an argument.
+ */
+ onHTMLDrop?: ( html: string ) => void;
+};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index a896453cb3a56f..451f607ea0b8e9 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -48,7 +48,6 @@
"src/custom-gradient-picker",
"src/custom-select-control",
"src/dimension-control",
- "src/drop-zone",
"src/duotone-picker",
"src/focal-point-picker",
"src/font-size-picker",
diff --git a/packages/compose/src/hooks/use-drop-zone/index.js b/packages/compose/src/hooks/use-drop-zone/index.js
index 73f1e9eb03b35c..1d30c92a16ff3c 100644
--- a/packages/compose/src/hooks/use-drop-zone/index.js
+++ b/packages/compose/src/hooks/use-drop-zone/index.js
@@ -33,14 +33,14 @@ function useFreshRef( value ) {
/**
* A hook to facilitate drag and drop handling.
*
- * @param {Object} props Named parameters.
- * @param {boolean} props.isDisabled Whether or not to disable the drop zone.
- * @param {(e: DragEvent) => void} props.onDragStart Called when dragging has started.
- * @param {(e: DragEvent) => void} props.onDragEnter Called when the zone is entered.
- * @param {(e: DragEvent) => void} props.onDragOver Called when the zone is moved within.
- * @param {(e: DragEvent) => void} props.onDragLeave Called when the zone is left.
- * @param {(e: MouseEvent) => void} props.onDragEnd Called when dragging has ended.
- * @param {(e: DragEvent) => void} props.onDrop Called when dropping in the zone.
+ * @param {Object} props Named parameters.
+ * @param {boolean} [props.isDisabled] Whether or not to disable the drop zone.
+ * @param {(e: DragEvent) => void} [props.onDragStart] Called when dragging has started.
+ * @param {(e: DragEvent) => void} [props.onDragEnter] Called when the zone is entered.
+ * @param {(e: DragEvent) => void} [props.onDragOver] Called when the zone is moved within.
+ * @param {(e: DragEvent) => void} [props.onDragLeave] Called when the zone is left.
+ * @param {(e: MouseEvent) => void} [props.onDragEnd] Called when dragging has ended.
+ * @param {(e: DragEvent) => void} [props.onDrop] Called when dropping in the zone.
*
* @return {import('react').RefCallback
} Ref callback to be passed to the drop zone element.
*/