Dropzone

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5 
6import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
7import {
8  formatDropzoneAccept,
9  parseDropzoneAccept,
10  validateDropzoneFiles,
11  type DropzoneAcceptRule,
12  type DropzoneFileRejection,
13  type DropzoneIntake,
14} from "@/components/ui/dropzone-core";
15 
16export {
17  formatDropzoneAccept,
18  matchesDropzoneAccept,
19  parseDropzoneAccept,
20  validateDropzoneFile,
21  validateDropzoneFiles,
22  type DropzoneAcceptRule,
23  type DropzoneFileRejection,
24  type DropzoneIntake,
25} from "@/components/ui/dropzone-core";
26 
27export type DropzoneFileItem = {
28  id: string;
29  file: File;
30};
31 
32type MaybePromise<T> = T | Promise<T>;
33 
34export type DropzoneFilesValidatorContext = {
35  acceptedFiles: File[];
36  currentCount: number;
37  currentFiles: DropzoneFileItem[];
38  fileRejections: DropzoneFileRejection[];
39};
40 
41export type DropzoneFilesValidatorResult =
42  | DropzoneFileRejection[]
43  | DropzoneIntake
44  | null
45  | undefined
46  | void;
47 
48export type DropzoneIntakeSource = "drop" | "input" | (string & {});
49 
50export type DropzoneIntakeDetails = {
51  source: DropzoneIntakeSource;
52};
53 
54export type DropzoneOpenFileDialogOptions = {
55  source?: DropzoneIntakeSource;
56};
57 
58type DropzoneDataAttributes = {
59  [key: `data-${string}`]: string | undefined;
60};
61 
62type DropzoneRootGetterProps<T extends HTMLElement> = React.HTMLAttributes<T> &
63  Partial<DropzoneDataAttributes>;
64 
65type DropzoneInputGetterProps = React.ComponentPropsWithRef<"input"> &
66  Partial<DropzoneDataAttributes>;
67 
68type DropzoneTriggerGetterProps<T extends HTMLElement> =
69  React.HTMLAttributes<T> &
70    Partial<DropzoneDataAttributes> & {
71      /** The trigger is a real `<button>`; suppress the ARIA-button polyfill. */
72      native?: boolean;
73      source?: DropzoneIntakeSource;
74    };
75 
76export type UseDropzoneProps = {
77  accept?: string | DropzoneAcceptRule[];
78  inputAccept?: string | DropzoneAcceptRule[];
79  currentFileCount?: number;
80  disabled?: boolean;
81  dragScope?: "root" | "document";
82  files?: DropzoneFileItem[];
83  defaultFiles?: DropzoneFileItem[];
84  maxFiles?: number;
85  maxSize?: number;
86  multiple?: boolean;
87  onFilesChange?: (files: DropzoneFileItem[]) => void;
88  onIntake?: (intake: DropzoneIntake, details: DropzoneIntakeDetails) => void;
89  storeFiles?: boolean;
90  validateFiles?: (
91    files: File[],
92    context: DropzoneFilesValidatorContext,
93  ) => MaybePromise<DropzoneFilesValidatorResult>;
94};
95 
96export type UseDropzoneReturn = {
97// … truncated