From e87dec80ddc01941dbc70794d1049e193962ffef Mon Sep 17 00:00:00 2001
From: Sean Costello <sean.costello@vimeo.com>
Date: Mon, 17 Apr 2023 16:13:11 -0400
Subject: [PATCH 1/2] Add optional drag event handlers to dropzone

---
 .../inputs/Dropzone/Dropzone.story.tsx        | 15 +++++++++++++
 src/components/inputs/Dropzone/Dropzone.tsx   | 22 +++++++++++++++----
 .../inputs/Dropzone/Dropzone.types.ts         |  5 ++++-
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/components/inputs/Dropzone/Dropzone.story.tsx b/src/components/inputs/Dropzone/Dropzone.story.tsx
index 01f817022..72e4bbeab 100644
--- a/src/components/inputs/Dropzone/Dropzone.story.tsx
+++ b/src/components/inputs/Dropzone/Dropzone.story.tsx
@@ -26,11 +26,26 @@ const onChange = (event: DropChangeEvent) => {
   );
 };
 
+const onDragEnter = (event: DragEvent) => {
+  console.log('Drag enter', event);
+};
+
+const onDragLeave = (event: DragEvent) => {
+  console.log('Drag leave', event);
+};
+
+const onDragOver = (event: DragEvent) => {
+  console.log('Drag over', event);
+};
+
 const Template: Story<Props> = (args) => {
   return (
     <Dropzone
       style={{ maxWidth: '40rem' }}
       onChange={onChange}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
       {...args}
     >
       <Header size="3">Drag files here</Header>
diff --git a/src/components/inputs/Dropzone/Dropzone.tsx b/src/components/inputs/Dropzone/Dropzone.tsx
index f247164cc..2aca5c616 100644
--- a/src/components/inputs/Dropzone/Dropzone.tsx
+++ b/src/components/inputs/Dropzone/Dropzone.tsx
@@ -20,13 +20,26 @@ function DropzoneComponent({
   forwardRef,
   multiple,
   onChange,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
   ...props
 }: Props) {
   const ref = useForwardRef(forwardRef);
   const [drag, dragSet] = useState(false);
 
-  const onDragOver = stopPrevent<DragEvent>(() => dragSet(true));
-  const onDragLeave = stopPrevent<DragEvent>(() => dragSet(false));
+  const handleDragOver = stopPrevent<DragEvent>(
+    (e: DragEvent<HTMLDivElement>) => {
+      onDragOver && onDragOver(e);
+      dragSet(true);
+    }
+  );
+  const handleDragLeave = stopPrevent<DragEvent>(
+    (e: DragEvent<HTMLDivElement>) => {
+      onDragLeave && onDragLeave(e);
+      dragSet(false);
+    }
+  );
 
   const onDrop = stopPrevent<DragEvent>(
     (event: DragEvent<HTMLDivElement> & DropChangeEvent) => {
@@ -39,8 +52,9 @@ function DropzoneComponent({
     <DropzoneContainer
       drag={active || drag}
       format={format}
-      onDragLeave={onDragLeave}
-      onDragOver={onDragOver}
+      onDragEnter={onDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
       onDrop={onDrop}
       {...props}
     >
diff --git a/src/components/inputs/Dropzone/Dropzone.types.ts b/src/components/inputs/Dropzone/Dropzone.types.ts
index ebd9b174b..563f79534 100644
--- a/src/components/inputs/Dropzone/Dropzone.types.ts
+++ b/src/components/inputs/Dropzone/Dropzone.types.ts
@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, DragEventHandler, ReactNode } from 'react';
 import { IrisInputProps } from '../../../utils';
 
 export type DropChangeEvent = ChangeEvent<HTMLInputElement> & {
@@ -22,4 +22,7 @@ export type Props = IrisInputProps<{
    */
   format?: 'primary' | 'secondary';
   onChange?: (event: DropChangeEvent) => void;
+  onDragEnter?: DragEventHandler<HTMLDivElement>;
+  onDragLeave?: DragEventHandler<HTMLDivElement>;
+  onDragOver?: DragEventHandler<HTMLDivElement>;
 }>;

From 9c871d04de6b2afbeb357adabf894f4f4b10ed29 Mon Sep 17 00:00:00 2001
From: Sean Costello <seancostellodp@gmail.com>
Date: Mon, 17 Apr 2023 17:30:01 -0400
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: kenneth-duverge <77157695+kenneth-duverge@users.noreply.github.com>
---
 src/components/inputs/Dropzone/Dropzone.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/inputs/Dropzone/Dropzone.tsx b/src/components/inputs/Dropzone/Dropzone.tsx
index 2aca5c616..c41f5f5a9 100644
--- a/src/components/inputs/Dropzone/Dropzone.tsx
+++ b/src/components/inputs/Dropzone/Dropzone.tsx
@@ -30,13 +30,13 @@ function DropzoneComponent({
 
   const handleDragOver = stopPrevent<DragEvent>(
     (e: DragEvent<HTMLDivElement>) => {
-      onDragOver && onDragOver(e);
+      onDragOver?.(e);
       dragSet(true);
     }
   );
   const handleDragLeave = stopPrevent<DragEvent>(
     (e: DragEvent<HTMLDivElement>) => {
-      onDragLeave && onDragLeave(e);
+      onDragLeave?.(e);
       dragSet(false);
     }
   );