diff --git a/categories/blob/react/src/components/FileSelectBox/index.tsx b/categories/blob/react/src/components/FileSelectBox/index.tsx
index c6ec584..2d228d3 100644
--- a/categories/blob/react/src/components/FileSelectBox/index.tsx
+++ b/categories/blob/react/src/components/FileSelectBox/index.tsx
@@ -83,30 +83,30 @@ export const FileSelectBoxDefaultPreviewComponent = React.forwardRef<
{!mini && (
<>
{typeof file?.type === 'string' && (
-
{file?.type}
+ {file?.type}
)}
{typeof file?.size === 'number' && (
-
- {new Intl.NumberFormat(undefined, {
- style: 'unit',
- unit: 'kilobyte',
- unitDisplay: 'long',
- }).format(file.size ?? 0)}
-
+
+ {new Intl.NumberFormat(undefined, {
+ style: 'unit',
+ unit: 'kilobyte',
+ unitDisplay: 'long',
+ }).format(file.size ?? 0)}
+
)}
{typeof file?.lastModified === 'number' && (
-
-
-
+
+
+
)}
>
)}
@@ -129,6 +129,7 @@ export const FileSelectBox = React.forwardRef {
+ const cancelEvent: React.DragEventHandler = React.useCallback((e) => {
e.stopPropagation();
e.preventDefault();
- };
+ }, []);
- const filesCount = fileList?.length ?? 0;
+ const handleDrop: React.DragEventHandler = React.useCallback((e) => {
+ cancelEvent(e);
+ doSetFileList(e);
+ }, [cancelEvent, doSetFileList]);
- const handleFileChange: React.ChangeEventHandler = (e) => {
+ const handleFileChange: React.ChangeEventHandler<
+ FileSelectBoxDerivedElement
+ > = React.useCallback((e) => {
const { currentTarget } = e;
if (clientSide && currentTarget.files && currentTarget.files.length > 0) {
setFileList(currentTarget.files);
setLastUpdated(Date.now());
+ setAboutToSelect(false);
onChange?.(e);
return;
}
@@ -205,26 +212,29 @@ export const FileSelectBox = React.forwardRef = (e) => {
+ const handleKeyDown: React.KeyboardEventHandler<
+ FileSelectBoxDerivedElement
+ > = React.useCallback((e) => {
const { code } = e;
if (code === 'Backspace' || code === 'Delete') {
setDeleteKeyPressed(true);
} else if (code === 'Enter' || code === 'Space' || code === 'Return') {
setAboutToSelect(true);
}
- };
+ }, []);
- const handleKeyUp: React.KeyboardEventHandler = (e) => {
+ const handleKeyUp: React.KeyboardEventHandler<
+ FileSelectBoxDerivedElement
+ > = React.useCallback((e) => {
const { code } = e;
if (code === 'Backspace' || code === 'Delete') {
doSetFileList(e);
setDeleteKeyPressed(false);
- } else if (code === 'Enter' || code === 'Space' || code === 'Return') {
- setAboutToSelect(false);
}
- };
+ }, [doSetFileList]);
const handleReselectMouseDown: React.MouseEventHandler<
HTMLButtonElement
@@ -253,6 +263,14 @@ export const FileSelectBox = React.forwardRef = React.useCallback((e) => {
+ setAboutToSelect(false);
+ setDeleteKeyPressed(false);
+ onBlur?.(e);
+ }, [onBlur]);
+
React.useEffect(() => {
const handleLabelMouseUp = () => {
setAboutToSelect(false);
@@ -265,6 +283,8 @@ export const FileSelectBox = React.forwardRef {
- cancelEvent(e);
- doSetFileList(e);
- } : undefined}
+ onDrop={clientSide ? handleDrop : undefined}
data-testid="root"
style={{
height: clientSide ? 64 : undefined,
@@ -307,8 +324,9 @@ export const FileSelectBox = React.forwardRef 0 && 'opacity-0',
)}
data-testid="clickArea"
@@ -324,6 +342,7 @@ export const FileSelectBox = React.forwardRef