@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

package/dist/cjs/components/FileUpload/index.cjs

@@ -22,17 +22,20 @@ const FileUpload = ({
   onFileClose
 }) => {
   const [file, setFile] = react.useState(null);
-  const handleFilesProcessed = react.useCallback((files) => {
-    const selectedFile = files[0];
-    const newFile = {
-      name: selectedFile.name,
-      size: selectedFile.size
-    };
-    setFile(newFile);
-    if (onFileSelect) {
-      onFileSelect(selectedFile);
-    }
-  }, [onFileSelect]);
+  const handleFilesProcessed = react.useCallback(
+    (files) => {
+      const selectedFile = files[0];
+      const newFile = {
+        name: selectedFile.name,
+        size: selectedFile.size
+      };
+      setFile(newFile);
+      if (onFileSelect) {
+        onFileSelect(selectedFile);
+      }
+    },
+    [onFileSelect]
+  );
   const {
     isDragging,
     isNotSupported,
@@ -65,10 +68,49 @@ const FileUpload = ({
   }, [onRetry]);
   const acceptedFileTypes = supportedFileTypes.join(",");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(FileUploadArea.FileUploadArea, { title, supportedFileTypes, size, isDragging, isNotSupported, hasFile: !!file, isError: !!file && !showSuccess && !showProgress, multiple: false, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick, children: file && /* @__PURE__ */ jsxRuntime.jsx(FileUploadItem.FileUploadItem, { fileName: file.name, fileSize: file.size, progress, showSuccess, showProgress, failureMessage, onRetry: handleRetryUpload, onRemove: handleRemoveFile, size, inline: true }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, style: {
-      display: "none"
-    } })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileUploadArea.FileUploadArea,
+      {
+        title,
+        supportedFileTypes,
+        size,
+        isDragging,
+        isNotSupported,
+        hasFile: !!file,
+        isError: !!file && !showSuccess && !showProgress,
+        multiple: false,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onClick: handleBrowseClick,
+        children: file && /* @__PURE__ */ jsxRuntime.jsx(
+          FileUploadItem.FileUploadItem,
+          {
+            fileName: file.name,
+            fileSize: file.size,
+            progress,
+            showSuccess,
+            showProgress,
+            failureMessage,
+            onRetry: handleRetryUpload,
+            onRemove: handleRemoveFile,
+            size,
+            inline: true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        accept: acceptedFileTypes,
+        onChange: handleFileSelect,
+        style: { display: "none" }
+      }
+    )
   ] });
 };
 

package/dist/cjs/components/FileUpload/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\n\ninterface FileInfo {\n  name: string;\n  size: number;\n}\n\nexport interface FileUploadProps {\n  /** The title text displayed in the upload area */\n  title: string;\n  supportedFileTypes?: string[];\n  size?: 'sm' | 'md';\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onFileSelect?: (file: File) => void;\n  onFileFailure?: () => void;\n  onFileClose?: () => void;\n}\n\nexport const FileUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  size = 'sm',\n  onFileSelect,\n  onRetry,\n  progress = 0,\n  failureMessage = 'Upload failed',\n  showProgress = false,\n  showSuccess = false,\n  onFileFailure,\n  onFileClose,\n}: FileUploadProps) => {\n  const [file, setFile] = useState<FileInfo | null>(null);\n\n  const handleFilesProcessed = useCallback(\n    (files: File[]) => {\n      const selectedFile = files[0];\n      const newFile: FileInfo = {\n        name: selectedFile.name,\n        size: selectedFile.size,\n      };\n\n      setFile(newFile);\n\n      if (onFileSelect) {\n        onFileSelect(selectedFile);\n      }\n    },\n    [onFileSelect]\n  );\n\n  const {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  } = useDragAndDrop({\n    onFilesProcessed: handleFilesProcessed,\n    supportedFileTypes,\n    onFileFailure,\n    multiple: false,\n  });\n\n  const handleRemoveFile = useCallback(() => {\n    setFile(null);\n    if (fileInputRef.current) {\n      fileInputRef.current.value = '';\n    }\n\n    if (onFileClose) {\n      onFileClose();\n    }\n  }, [onFileClose, fileInputRef]);\n\n  const handleRetryUpload = useCallback(() => {\n    if (onRetry) {\n      onRetry();\n    }\n  }, [onRetry]);\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size={size}\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={!!file}\n        isError={!!file && !showSuccess && !showProgress}\n        multiple={false}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      >\n        {file && (\n          <FileUploadItem\n            fileName={file.name}\n            fileSize={file.size}\n            progress={progress}\n            showSuccess={showSuccess}\n            showProgress={showProgress}\n            failureMessage={failureMessage}\n            onRetry={handleRetryUpload}\n            onRemove={handleRemoveFile}\n            size={size}\n            inline={true}\n          />\n        )}\n      </FileUploadArea>\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["FileUpload","title","supportedFileTypes","size","onFileSelect","onRetry","progress","failureMessage","showProgress","showSuccess","onFileFailure","onFileClose","file","setFile","useState","handleFilesProcessed","useCallback","files","selectedFile","newFile","name","isDragging","isNotSupported","fileInputRef","handleDragEnter","handleDragLeave","handleDragOver","handleDrop","handleFileSelect","handleBrowseClick","useDragAndDrop","onFilesProcessed","multiple","handleRemoveFile","current","value","handleRetryUpload","acceptedFileTypes","join","jsxs","Fragment","jsx","FileUploadArea","FileUploadItem","display"],"mappings":";;;;;;;;;;AAyBO,MAAMA,aAAaA,CAAC;AAAA,EACzBC,KAAAA;AAAAA,EACAC,kBAAAA,GAAqB,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,EACpCC,IAAAA,GAAO,IAAA;AAAA,EACPC,YAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA,GAAW,CAAA;AAAA,EACXC,cAAAA,GAAiB,eAAA;AAAA,EACjBC,YAAAA,GAAe,KAAA;AAAA,EACfC,WAAAA,GAAc,KAAA;AAAA,EACdC,aAAAA;AAAAA,EACAC;AACe,CAAA,KAAM;AACrB,EAAA,MAAM,CAACC,IAAAA,EAAMC,OAAO,CAAA,GAAIC,eAA0B,IAAI,CAAA;AAEtD,EAAA,MAAMC,oBAAAA,GAAuBC,iBAAAA,CAC3B,CAACC,KAAAA,KAAkB;AACjB,IAAA,MAAMC,YAAAA,GAAeD,MAAM,CAAC,CAAA;AAC5B,IAAA,MAAME,OAAAA,GAAoB;AAAA,MACxBC,MAAMF,YAAAA,CAAaE,IAAAA;AAAAA,MACnBjB,MAAMe,YAAAA,CAAaf;AAAAA,KACrB;AAEAU,IAAAA,OAAAA,CAAQM,OAAO,CAAA;AAEf,IAAA,IAAIf,YAAAA,EAAc;AAChBA,MAAAA,YAAAA,CAAac,YAAY,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EACA,CAACd,YAAY,CACf,CAAA;AAEA,EAAA,MAAM;AAAA,IACJiB,UAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC;AAAAA,MACEC,6BAAAA,CAAe;AAAA,IACjBC,gBAAAA,EAAkBhB,oBAAAA;AAAAA,IAClBb,kBAAAA;AAAAA,IACAQ,aAAAA;AAAAA,IACAsB,QAAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,MAAMC,gBAAAA,GAAmBjB,kBAAY,MAAM;AACzCH,IAAAA,OAAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,IAAIU,aAAaW,OAAAA,EAAS;AACxBX,MAAAA,YAAAA,CAAaW,QAAQC,KAAAA,GAAQ,EAAA;AAAA,IAC/B;AAEA,IAAA,IAAIxB,WAAAA,EAAa;AACfA,MAAAA,WAAAA,EAAY;AAAA,IACd;AAAA,EACF,CAAA,EAAG,CAACA,WAAAA,EAAaY,YAAY,CAAC,CAAA;AAE9B,EAAA,MAAMa,iBAAAA,GAAoBpB,kBAAY,MAAM;AAC1C,IAAA,IAAIX,OAAAA,EAAS;AACXA,MAAAA,OAAAA,EAAQ;AAAA,IACV;AAAA,EACF,CAAA,EAAG,CAACA,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAMgC,iBAAAA,GAAoBnC,kBAAAA,CAAmBoC,IAAAA,CAAK,GAAG,CAAA;AAErD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,6BAAA,EAAA,EACC,OACA,kBAAA,EACA,IAAA,EACA,YACA,cAAA,EACA,OAAA,EAAS,CAAC,CAAC9B,IAAAA,EACX,OAAA,EAAS,CAAC,CAACA,IAAAA,IAAQ,CAACH,WAAAA,IAAe,CAACD,YAAAA,EACpC,UAAU,KAAA,EACV,WAAA,EAAagB,eAAAA,EACb,WAAA,EAAaC,eAAAA,EACb,UAAA,EAAYC,gBACZ,MAAA,EAAQC,UAAAA,EACR,SAASE,iBAAAA,EAERjB,QAAAA,EAAAA,IAAAA,mCACE+B,6BAAA,EAAA,EACC,QAAA,EAAU/B,IAAAA,CAAKQ,IAAAA,EACf,QAAA,EAAUR,IAAAA,CAAKT,MACf,QAAA,EACA,WAAA,EACA,YAAA,EACA,cAAA,EACA,OAAA,EAASiC,iBAAAA,EACT,UAAUH,gBAAAA,EACV,IAAA,EACA,MAAA,EAAQ,IAAA,EAAK,CAAA,EAGnB,CAAA;AAAA,oBAEAQ,cAAA,CAAC,OAAA,EAAA,EACC,IAAA,EAAK,MAAA,EACL,GAAA,EAAKlB,cACL,MAAA,EAAQc,iBAAAA,EACR,QAAA,EAAUT,gBAAAA,EACV,KAAA,EAAO;AAAA,MAAEgB,OAAAA,EAAS;AAAA,KAAO,EAAE;AAAA,GAAA,EAE/B,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { FileUploadArea } from './FileUploadArea';\nimport { FileUploadItem } from './FileUploadItem';\nimport { useDragAndDrop } from './useDragAndDrop';\n\ninterface FileInfo {\n  name: string;\n  size: number;\n}\n\nexport interface FileUploadProps {\n  /** The title text displayed in the upload area */\n  title: string;\n  supportedFileTypes?: string[];\n  size?: 'sm' | 'md';\n  progress?: number;\n  showSuccess?: boolean;\n  showProgress?: boolean;\n  failureMessage?: string;\n  onRetry?: () => void;\n  onFileSelect?: (file: File) => void;\n  onFileFailure?: () => void;\n  onFileClose?: () => void;\n}\n\nexport const FileUpload = ({\n  title,\n  supportedFileTypes = ['.txt', '.sql'],\n  size = 'sm',\n  onFileSelect,\n  onRetry,\n  progress = 0,\n  failureMessage = 'Upload failed',\n  showProgress = false,\n  showSuccess = false,\n  onFileFailure,\n  onFileClose,\n}: FileUploadProps) => {\n  const [file, setFile] = useState<FileInfo | null>(null);\n\n  const handleFilesProcessed = useCallback(\n    (files: File[]) => {\n      const selectedFile = files[0];\n      const newFile: FileInfo = {\n        name: selectedFile.name,\n        size: selectedFile.size,\n      };\n\n      setFile(newFile);\n\n      if (onFileSelect) {\n        onFileSelect(selectedFile);\n      }\n    },\n    [onFileSelect]\n  );\n\n  const {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  } = useDragAndDrop({\n    onFilesProcessed: handleFilesProcessed,\n    supportedFileTypes,\n    onFileFailure,\n    multiple: false,\n  });\n\n  const handleRemoveFile = useCallback(() => {\n    setFile(null);\n    if (fileInputRef.current) {\n      fileInputRef.current.value = '';\n    }\n\n    if (onFileClose) {\n      onFileClose();\n    }\n  }, [onFileClose, fileInputRef]);\n\n  const handleRetryUpload = useCallback(() => {\n    if (onRetry) {\n      onRetry();\n    }\n  }, [onRetry]);\n\n  const acceptedFileTypes = supportedFileTypes.join(',');\n\n  return (\n    <>\n      <FileUploadArea\n        title={title}\n        supportedFileTypes={supportedFileTypes}\n        size={size}\n        isDragging={isDragging}\n        isNotSupported={isNotSupported}\n        hasFile={!!file}\n        isError={!!file && !showSuccess && !showProgress}\n        multiple={false}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        onClick={handleBrowseClick}\n      >\n        {file && (\n          <FileUploadItem\n            fileName={file.name}\n            fileSize={file.size}\n            progress={progress}\n            showSuccess={showSuccess}\n            showProgress={showProgress}\n            failureMessage={failureMessage}\n            onRetry={handleRetryUpload}\n            onRemove={handleRemoveFile}\n            size={size}\n            inline={true}\n          />\n        )}\n      </FileUploadArea>\n\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        accept={acceptedFileTypes}\n        onChange={handleFileSelect}\n        style={{ display: 'none' }}\n      />\n    </>\n  );\n};\n"],"names":["useState","useCallback","useDragAndDrop","jsxs","Fragment","jsx","FileUploadArea","FileUploadItem"],"mappings":"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"}

package/dist/cjs/components/FileUpload/useDragAndDrop.cjs

@@ -67,43 +67,52 @@ const useDragAndDrop = ({
       document.removeEventListener("mouseleave", handleDragEnd);
     };
   }, []);
-  const processFiles = react.useCallback((files) => {
-    const validFiles = [];
-    let hasInvalidFile = false;
-    files.forEach((file) => {
-      if (isFiletypeSupported(file.name, supportedFileTypes)) {
-        validFiles.push(file);
-      } else {
-        hasInvalidFile = true;
+  const processFiles = react.useCallback(
+    (files) => {
+      const validFiles = [];
+      let hasInvalidFile = false;
+      files.forEach((file) => {
+        if (isFiletypeSupported(file.name, supportedFileTypes)) {
+          validFiles.push(file);
+        } else {
+          hasInvalidFile = true;
+        }
+      });
+      if (hasInvalidFile) {
+        setIsNotSupported(true);
+        if (onFileFailure) {
+          onFileFailure();
+        }
       }
-    });
-    if (hasInvalidFile) {
-      setIsNotSupported(true);
-      if (onFileFailure) {
-        onFileFailure();
+      if (validFiles.length > 0) {
+        setIsNotSupported(false);
+        onFilesProcessed(validFiles);
       }
-    }
-    if (validFiles.length > 0) {
-      setIsNotSupported(false);
-      onFilesProcessed(validFiles);
-    }
-  }, [onFilesProcessed, supportedFileTypes, onFileFailure]);
-  const handleDrop = react.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-    dragCounterRef.current = 0;
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      const files = Array.from(e.dataTransfer.files);
-      processFiles(multiple ? files : [files[0]]);
-    }
-  }, [processFiles, multiple]);
-  const handleFileSelect = react.useCallback((e) => {
-    if (e.target.files && e.target.files.length > 0) {
-      const files = Array.from(e.target.files);
-      processFiles(files);
-    }
-  }, [processFiles]);
+    },
+    [onFilesProcessed, supportedFileTypes, onFileFailure]
+  );
+  const handleDrop = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const files = Array.from(e.dataTransfer.files);
+        processFiles(multiple ? files : [files[0]]);
+      }
+    },
+    [processFiles, multiple]
+  );
+  const handleFileSelect = react.useCallback(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        const files = Array.from(e.target.files);
+        processFiles(files);
+      }
+    },
+    [processFiles]
+  );
   const handleBrowseClick = react.useCallback(() => {
     if (fileInputRef.current) {
       fileInputRef.current.click();

package/dist/cjs/components/FileUpload/useDragAndDrop.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDragAndDrop.cjs","sources":["../../../../src/components/FileUpload/useDragAndDrop.ts"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type DragEvent,\n  type RefObject,\n  type ChangeEvent,\n} from 'react';\n\nexport interface UseDragAndDropOptions {\n  onFilesProcessed: (files: File[]) => void;\n  supportedFileTypes: string[];\n  onFileFailure?: () => void;\n  multiple?: boolean;\n}\n\nexport interface UseDragAndDropReturn {\n  isDragging: boolean;\n  isNotSupported: boolean;\n  fileInputRef: RefObject<HTMLInputElement>;\n  handleDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  handleDrop: (e: DragEvent<HTMLDivElement>) => void;\n  handleFileSelect: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleBrowseClick: () => void;\n}\n\nconst isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => {\n  if (!supportedTypes.length) {\n    return true;\n  }\n\n  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));\n  return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase());\n};\n\nexport const useDragAndDrop = ({\n  onFilesProcessed,\n  supportedFileTypes,\n  onFileFailure,\n  multiple = false,\n}: UseDragAndDropOptions): UseDragAndDropReturn => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isNotSupported, setIsNotSupported] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const dragCounterRef = useRef(0);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n    if (isNotSupported) {\n      timeoutId = setTimeout(() => {\n        setIsNotSupported(false);\n      }, 2000);\n    }\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [isNotSupported]);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set to false when left the container\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Reset state when drag ends anywhere in the document\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    window.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('drop', handleDragEnd);\n    document.addEventListener('mouseleave', handleDragEnd);\n\n    return () => {\n      window.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('drop', handleDragEnd);\n      document.removeEventListener('mouseleave', handleDragEnd);\n    };\n  }, []);\n\n  const processFiles = useCallback(\n    (files: File[]) => {\n      const validFiles: File[] = [];\n      let hasInvalidFile = false;\n\n      files.forEach(file => {\n        if (isFiletypeSupported(file.name, supportedFileTypes)) {\n          validFiles.push(file);\n        } else {\n          hasInvalidFile = true;\n        }\n      });\n\n      if (hasInvalidFile) {\n        setIsNotSupported(true);\n        if (onFileFailure) {\n          onFileFailure();\n        }\n      }\n\n      if (validFiles.length > 0) {\n        setIsNotSupported(false);\n        onFilesProcessed(validFiles);\n      }\n    },\n    [onFilesProcessed, supportedFileTypes, onFileFailure]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        const files = Array.from(e.dataTransfer.files);\n        processFiles(multiple ? files : [files[0]]);\n      }\n    },\n    [processFiles, multiple]\n  );\n\n  const handleFileSelect = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        const files = Array.from(e.target.files);\n        processFiles(files);\n      }\n    },\n    [processFiles]\n  );\n\n  const handleBrowseClick = useCallback(() => {\n    if (fileInputRef.current) {\n      fileInputRef.current.click();\n    }\n  }, []);\n\n  return {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  };\n};\n"],"names":["isFiletypeSupported","filename","supportedTypes","length","extension","toLowerCase","slice","lastIndexOf","some","type","useDragAndDrop","onFilesProcessed","supportedFileTypes","onFileFailure","multiple","isDragging","setIsDragging","useState","isNotSupported","setIsNotSupported","fileInputRef","useRef","dragCounterRef","useEffect","timeoutId","setTimeout","clearTimeout","handleDragEnter","useCallback","e","preventDefault","stopPropagation","current","handleDragLeave","handleDragOver","handleDragEnd","window","addEventListener","document","removeEventListener","processFiles","files","validFiles","hasInvalidFile","forEach","file","name","push","handleDrop","dataTransfer","Array","from","handleFileSelect","target","handleBrowseClick","click"],"mappings":"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"}
+{"version":3,"file":"useDragAndDrop.cjs","sources":["../../../../src/components/FileUpload/useDragAndDrop.ts"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type DragEvent,\n  type RefObject,\n  type ChangeEvent,\n} from 'react';\n\nexport interface UseDragAndDropOptions {\n  onFilesProcessed: (files: File[]) => void;\n  supportedFileTypes: string[];\n  onFileFailure?: () => void;\n  multiple?: boolean;\n}\n\nexport interface UseDragAndDropReturn {\n  isDragging: boolean;\n  isNotSupported: boolean;\n  fileInputRef: RefObject<HTMLInputElement>;\n  handleDragEnter: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLDivElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLDivElement>) => void;\n  handleDrop: (e: DragEvent<HTMLDivElement>) => void;\n  handleFileSelect: (e: ChangeEvent<HTMLInputElement>) => void;\n  handleBrowseClick: () => void;\n}\n\nconst isFiletypeSupported = (filename: string, supportedTypes: string[]): boolean => {\n  if (!supportedTypes.length) {\n    return true;\n  }\n\n  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));\n  return supportedTypes.some(type => type.toLowerCase() === extension.toLowerCase());\n};\n\nexport const useDragAndDrop = ({\n  onFilesProcessed,\n  supportedFileTypes,\n  onFileFailure,\n  multiple = false,\n}: UseDragAndDropOptions): UseDragAndDropReturn => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isNotSupported, setIsNotSupported] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const dragCounterRef = useRef(0);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n    if (isNotSupported) {\n      timeoutId = setTimeout(() => {\n        setIsNotSupported(false);\n      }, 2000);\n    }\n    return () => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    };\n  }, [isNotSupported]);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    dragCounterRef.current += 1;\n    setIsDragging(true);\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    dragCounterRef.current -= 1;\n\n    // Only set to false when left the container\n    if (dragCounterRef.current <= 0) {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    }\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Reset state when drag ends anywhere in the document\n  useEffect(() => {\n    const handleDragEnd = () => {\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n    };\n\n    window.addEventListener('dragend', handleDragEnd);\n    document.addEventListener('drop', handleDragEnd);\n    document.addEventListener('mouseleave', handleDragEnd);\n\n    return () => {\n      window.removeEventListener('dragend', handleDragEnd);\n      document.removeEventListener('drop', handleDragEnd);\n      document.removeEventListener('mouseleave', handleDragEnd);\n    };\n  }, []);\n\n  const processFiles = useCallback(\n    (files: File[]) => {\n      const validFiles: File[] = [];\n      let hasInvalidFile = false;\n\n      files.forEach(file => {\n        if (isFiletypeSupported(file.name, supportedFileTypes)) {\n          validFiles.push(file);\n        } else {\n          hasInvalidFile = true;\n        }\n      });\n\n      if (hasInvalidFile) {\n        setIsNotSupported(true);\n        if (onFileFailure) {\n          onFileFailure();\n        }\n      }\n\n      if (validFiles.length > 0) {\n        setIsNotSupported(false);\n        onFilesProcessed(validFiles);\n      }\n    },\n    [onFilesProcessed, supportedFileTypes, onFileFailure]\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragging(false);\n      dragCounterRef.current = 0;\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        const files = Array.from(e.dataTransfer.files);\n        processFiles(multiple ? files : [files[0]]);\n      }\n    },\n    [processFiles, multiple]\n  );\n\n  const handleFileSelect = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        const files = Array.from(e.target.files);\n        processFiles(files);\n      }\n    },\n    [processFiles]\n  );\n\n  const handleBrowseClick = useCallback(() => {\n    if (fileInputRef.current) {\n      fileInputRef.current.click();\n    }\n  }, []);\n\n  return {\n    isDragging,\n    isNotSupported,\n    fileInputRef,\n    handleDragEnter,\n    handleDragLeave,\n    handleDragOver,\n    handleDrop,\n    handleFileSelect,\n    handleBrowseClick,\n  };\n};\n"],"names":["useState","useRef","useEffect","useCallback"],"mappings":"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"}

package/dist/cjs/components/Flyout/Flyout.css

@@ -1,4 +1,4 @@
-@keyframes flyout-animation-width__LabkI {
+@layer clickui {@keyframes flyout-animation-width__LabkI {
   from {
     width: 0;
   }
@@ -229,3 +229,4 @@
   display: inline-block;
   max-width: calc(100% - 1rem);
 }
+}

package/dist/cjs/components/Flyout/index.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const ThemeContext = require('../../theme/ThemeContext.cjs');
 const RadixDialog = require('@radix-ui/react-dialog');
 const CrossButton = require('../CrossButton/index.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
@@ -19,16 +19,16 @@ const CodeBlock = require('../CodeBlock/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
 const classVarianceAuthority = require('class-variance-authority');
 
-const Flyout = ({
-  modal = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.Dialog, { modal, ...props });
+const Flyout = ({ modal = false, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadixDialog.Dialog,
+    {
+      modal,
+      ...props
+    }
+  );
 };
-const Trigger = ({
-  children,
-  ...props
-}) => {
+const Trigger = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children }) });
 };
 Trigger.displayName = "Flyout.Trigger";
@@ -76,7 +76,7 @@ const Content = ({
   ...props
 }) => {
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
-  const theme = styledComponents.useTheme();
+  const theme = ThemeContext.useTheme();
   const mergedStyle = react.useMemo(() => {
     const resolvedWidth = width || theme.click.flyout.size[size].width;
     return {
@@ -86,19 +86,23 @@ const Content = ({
   }, [width, size, style, theme]);
   return /* @__PURE__ */ jsxRuntime.jsxs(RadixDialog.DialogPortal, { container: portalContainer, children: [
     showOverlay && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogOverlay, { className: "DialogOverlay" }),
-    /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogContent, { onInteractOutside: (e) => {
-      if (!closeOnInteractOutside) {
-        e.preventDefault();
-      }
-      if (typeof onInteractOutside === "function") {
-        onInteractOutside(e);
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadixDialog.DialogContent,
+      {
+        onInteractOutside: (e) => {
+          if (!closeOnInteractOutside) {
+            e.preventDefault();
+          }
+          if (typeof onInteractOutside === "function") {
+            onInteractOutside(e);
+          }
+        },
+        ...props,
+        style: mergedStyle,
+        className: cva.cn(contentVariants({ type, strategy, align, hasShadow }), className),
+        children
       }
-    }, ...props, style: mergedStyle, className: cva.cn(contentVariants({
-      type,
-      strategy,
-      align,
-      hasShadow
-    }), className), children })
+    )
   ] });
 };
 Content.displayName = "Flyout.Content";
@@ -114,13 +118,16 @@ const elementVariants = classVarianceAuthority.cva(Flyout_module.default.element
     type: "default"
   }
 });
-const Element = ({
-  type,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { orientation: "vertical", padding: "none", gap: "none", ...props, className: cva.cn(elementVariants({
-  type
-}), className) });
+const Element = ({ type, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  Container.Container,
+  {
+    orientation: "vertical",
+    padding: "none",
+    gap: "none",
+    ...props,
+    className: cva.cn(elementVariants({ type }), className)
+  }
+);
 Element.displayName = "Flyout.Element";
 Flyout.Element = Element;
 const headerVariants = classVarianceAuthority.cva(Flyout_module.default.header, {
@@ -168,30 +175,88 @@ const Header = ({
 }) => {
   if (children) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Flyout_module.default.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { justifyContent: "space-between", alignItems: "start", padding: "none", gap: "none", fillWidth: false, isResponsive: false, ...props, className: cva.cn(headerVariants({
-        type
-      }), className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
-        showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
-      ] }),
-      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Container.Container,
+        {
+          justifyContent: "space-between",
+          alignItems: "start",
+          padding: "none",
+          gap: "none",
+          fillWidth: false,
+          isResponsive: false,
+          ...props,
+          className: cva.cn(headerVariants({ type }), className),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Container.Container,
+              {
+                padding: "none",
+                gap: "none",
+                orientation: "vertical",
+                grow: "1",
+                children
+              }
+            ),
+            showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                name: "cross",
+                size: type === "inline" ? "md" : "lg"
+              }
+            ) }) })
+          ]
+        }
+      ),
+      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(
+        Separator.Separator,
+        {
+          "data-testid": "flyout-header-separator",
+          size: "lg"
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Flyout_module.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { justifyContent: "space-between", alignItems: "start", fillWidth: false, isResponsive: false, ...props, className: cva.cn(headerVariants({
-      type
-    }), className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogTitle, { className: cva.cn(titleVariants({
-          type
-        })), children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogDescription, { className: cva.cn(descriptionVariants({
-          type
-        })), children: description })
-      ] }),
-      showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
-    ] }),
-    showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { "data-testid": "flyout-header-separator", size: "lg" })
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Container.Container,
+      {
+        justifyContent: "space-between",
+        alignItems: "start",
+        fillWidth: false,
+        isResponsive: false,
+        ...props,
+        className: cva.cn(headerVariants({ type }), className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container.Container,
+            {
+              padding: "none",
+              gap: "none",
+              orientation: "vertical",
+              grow: "1",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogTitle, { className: cva.cn(titleVariants({ type })), children: title }),
+                description && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogDescription, { className: cva.cn(descriptionVariants({ type })), children: description })
+              ]
+            }
+          ),
+          showClose && /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton.CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              name: "cross",
+              size: type === "inline" ? "md" : "lg"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    showSeparator && /* @__PURE__ */ jsxRuntime.jsx(
+      Separator.Separator,
+      {
+        "data-testid": "flyout-header-separator",
+        size: "lg"
+      }
+    )
   ] });
 };
 Header.displayName = "Flyout.Header";
@@ -207,13 +272,16 @@ const bodyVariants = classVarianceAuthority.cva(Flyout_module.default.body, {
     align: "default"
   }
 });
-const Body = ({
-  align,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { overflow: "auto", orientation: "vertical", grow: "1", ...props, className: cva.cn(bodyVariants({
-  align
-}), className) });
+const Body = ({ align, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  Container.Container,
+  {
+    overflow: "auto",
+    orientation: "vertical",
+    grow: "1",
+    ...props,
+    className: cva.cn(bodyVariants({ align }), className)
+  }
+);
 Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
 const footerVariants = classVarianceAuthority.cva(Flyout_module.default.footer, {
@@ -231,21 +299,41 @@ const FlyoutClose = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "secondary", ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogClose, { asChild: true, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      type: "secondary",
+      ...props
+    }
+  ) });
 };
 FlyoutClose.displayName = "Flyout.Close";
 Flyout.Close = FlyoutClose;
-const Footer = ({
-  type,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { gap: "none", orientation: "vertical", alignItems: "end", className: Flyout_module.default["footer-container"], children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "xs" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props, className: cva.cn(footerVariants({
-      type
-    }), className) })
-  ] });
+const Footer = ({ type, className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Container.Container,
+    {
+      gap: "none",
+      orientation: "vertical",
+      alignItems: "end",
+      className: Flyout_module.default["footer-container"],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "xs" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Container.Container,
+          {
+            justifyContent: "end",
+            gap: "none",
+            padding: "none",
+            isResponsive: false,
+            wrap: "wrap",
+            ...props,
+            className: cva.cn(footerVariants({ type }), className)
+          }
+        )
+      ]
+    }
+  );
 };
 Footer.displayName = "Flyout.Footer";
 Flyout.Footer = Footer;
@@ -260,10 +348,29 @@ const FlyoutCodeBlock = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Element, { fillHeight: true, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { className: cva.cn(Flyout_module.default["code-block"], className), wrapLines, language, showLineNumbers, showWrapButton, onCopy, onCopyError, children: statement }),
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "xs" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Element,
+    {
+      fillHeight: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CodeBlock.CodeBlock,
+          {
+            className: cva.cn(Flyout_module.default["code-block"], className),
+            wrapLines,
+            language,
+            showLineNumbers,
+            showWrapButton,
+            onCopy,
+            onCopyError,
+            children: statement
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "xs" })
+      ]
+    }
+  );
 };
 Flyout.CodeBlock = FlyoutCodeBlock;