demo: fix styles and click to select file

README.md

@@ -22,7 +22,7 @@ Online parquet file reader demo available at:
 
 https://hyparam.github.io/hyparquet/
 
-[![demo](demo.png)](https://hyparam.github.io/hyparquet/)
+[![hyparquet demo](demo/assets/demo.png)](https://hyparam.github.io/hyparquet/)
 
 ## Features
 

demo/Dropzone.tsx

@@ -34,8 +34,8 @@ export default function Dropzone({ children, onFileDrop, onUrlDrop, onError }: D
    * @param {MouseEvent} e - click
    */
   function triggerFileSelect(e: React.MouseEvent<HTMLDivElement>) {
-    // If click inside '.dropzone-select', activate file input dialog
-    if ((e.target as Element).closest('.dropzone-select')) {
+    // If click inside '.dropzone', activate file input dialog
+    if ((e.target as Element).classList.contains('dropzone')) {
       fileInputRef.current?.click()
     }
   }
@@ -48,11 +48,8 @@ export default function Dropzone({ children, onFileDrop, onUrlDrop, onError }: D
    */
   function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {
     const { files } = e.target
-    if (!files) return
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i]
-      // TODO: Load file view
-    }
+    if (!files || files.length !== 1) return
+    onFileDrop(files[0])
   }
 
   useEffect(() => {
@@ -95,16 +92,16 @@ export default function Dropzone({ children, onFileDrop, onUrlDrop, onError }: D
       }
     }
 
-    dropzone.addEventListener('dragenter', onDragEnter)
-    dropzone.addEventListener('dragover', onDragOver)
-    dropzone.addEventListener('dragleave', onDragLeave)
+    window.addEventListener('dragenter', onDragEnter)
+    window.addEventListener('dragover', onDragOver)
+    window.addEventListener('dragleave', onDragLeave)
     dropzone.addEventListener('drop', handleFileDrop)
 
     // Cleanup event listeners when component is unmounted
     return () => {
-      dropzone.removeEventListener('dragenter', onDragEnter)
-      dropzone.removeEventListener('dragover', onDragOver)
-      dropzone.removeEventListener('dragleave', onDragLeave)
+      window.removeEventListener('dragenter', onDragEnter)
+      window.removeEventListener('dragover', onDragOver)
+      window.removeEventListener('dragleave', onDragLeave)
       dropzone.removeEventListener('drop', handleFileDrop)
     }
   })
@@ -121,7 +118,6 @@ export default function Dropzone({ children, onFileDrop, onUrlDrop, onError }: D
         </div>
       </div>
       <input
-        multiple
         onChange={handleFileSelect}
         ref={fileInputRef}
         style={{ display: 'none' }}

demo/demo.css

@@ -407,7 +407,7 @@ table:focus-visible {
   text-align: left;
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: pre-wrap;
+  white-space: nowrap;
 }
 
 /* pending state */

package.json

@@ -33,7 +33,7 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
     "@types/node": "22.5.5",
-    "@types/react": "18.3.6",
+    "@types/react": "18.3.7",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "8.6.0",
     "@vitest/coverage-v8": "2.1.1",