@dust-tt/sparkle 0.2.190-rc → 0.2.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.190-rc",
+  "version": "0.2.190",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/_index.ts

@@ -103,8 +103,8 @@ export { Avatar };
 import Spinner from "./components/Spinner";
 export { Spinner };
 
-import DragArea from "./components/DragArea";
-export { DragArea };
+import DropzoneOverlay from "./components/DropzoneOverlay";
+export { DropzoneOverlay };
 
 import CollapseButton from "./components/CollapseButton";
 export { CollapseButton };

package/src/components/{DragArea.tsx → DropzoneOverlay.tsx}

@@ -1,29 +1,50 @@
 import Lottie, { LottieRefCurrentProps } from "lottie-react";
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { ArrowUpOnSquareIcon, Icon } from "@sparkle/_index";
 import anim from "@sparkle/lottie/dragArea";
 
-export interface DragZoneProps {
-  title?: string;
-  description?: string;
+export interface DropzoneOverlayProps {
+  description: string;
+  isDragActive: boolean;
+  title: string;
   visual?: React.ReactNode;
 }
 
-const DragArea: React.FC<DragZoneProps> = ({
-  title = "Drag and drop",
-  description = "Drag and drop your files here",
+export default function DropzoneOverlay({
+  description,
+  isDragActive,
+  title,
   visual = (
     <Icon visual={ArrowUpOnSquareIcon} size="lg" className="s-text-white" />
   ),
-}) => {
+}: DropzoneOverlayProps) {
   const lottieRef = useRef<LottieRefCurrentProps | null>(null);
 
+  const [isActiveDelayed, setIsActiveDelayed] = useState(false);
+
+  // This is used to delay the removal of the overlay when the user stops dragging.
+  useEffect(() => {
+    if (isDragActive) {
+      setIsActiveDelayed(true);
+    } else {
+      const timeoutId = setTimeout(() => {
+        setIsActiveDelayed(false);
+      }, 400);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isDragActive]);
+
+  if (!isActiveDelayed) {
+    return null;
+  }
+
   return (
     <div
-      className="s-flex s-h-full s-w-full s-flex-col s-items-center s-justify-center s-gap-0 s-bg-white/80 s-text-element-800"
+      className="s-absolute s-inset-0 s-z-50 s-flex s-h-full s-w-full s-flex-col s-items-center s-justify-center s-gap-0 s-bg-white/80 s-text-element-800"
       onMouseLeave={() => {
         lottieRef.current?.setDirection(-1);
+        lottieRef.current?.setSpeed(2);
         lottieRef.current?.play();
       }}
       onDrop={() => {
@@ -47,6 +68,4 @@ const DragArea: React.FC<DragZoneProps> = ({
       <div className="s-font-base s-text-base">{description}</div>
     </div>
   );
-};
-
-export default DragArea;
+}