@zayne-labs/ui-react 0.7.4 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/css/preset.css +2 -0
  2. package/css/theme.css +17 -0
  3. package/dist/esm/chunk-DNYM6XGW.js +6 -0
  4. package/dist/esm/chunk-DNYM6XGW.js.map +1 -0
  5. package/dist/esm/common/await/index.d.ts +0 -1
  6. package/dist/esm/common/await/index.js +3 -15
  7. package/dist/esm/common/await/index.js.map +1 -1
  8. package/dist/esm/common/switch/index.js +2 -1
  9. package/dist/esm/common/switch/index.js.map +1 -1
  10. package/dist/esm/ui/carousel/index.js +5 -5
  11. package/dist/esm/ui/carousel/index.js.map +1 -1
  12. package/dist/esm/ui/drop-zone/index.d.ts +81 -658
  13. package/dist/esm/ui/drop-zone/index.js +241 -102
  14. package/dist/esm/ui/drop-zone/index.js.map +1 -1
  15. package/dist/esm/ui/form/index.d.ts +6 -4
  16. package/dist/esm/ui/form/index.js +55 -43
  17. package/dist/esm/ui/form/index.js.map +1 -1
  18. package/package.json +30 -20
package/dist/esm/ui/drop-zone/index.d.ts CHANGED
@@ -1,40 +1,60 @@
1
1
  import * as react from 'react';
2
- import { FileValidationOptions } from '@zayne-labs/toolkit-core';
3
- import { DiscriminatedRenderProps, InferProps } from '@zayne-labs/toolkit-react/utils';
2
+ import { DiscriminatedRenderProps, InferProps, GetSlotComponentProps } from '@zayne-labs/toolkit-react/utils';
3
+ import { FileValidationErrorContext, FileMeta, FileValidationOptions } from '@zayne-labs/toolkit-core';
4
+ import { Prettify } from '@zayne-labs/toolkit-type-helpers';
4
5
 
5
- type RenderProps = {
6
- acceptedFiles: File[];
7
- inputRef: React.RefObject<HTMLInputElement | null>;
8
- isDragging: boolean;
9
- openFilePicker: () => void;
10
- };
11
- type RootProps = InferProps<"div"> & {
6
+ type RootProps = InferProps<HTMLElement> & {
12
7
  classNames?: {
13
- activeDrag?: string;
14
8
  base?: string;
9
+ isDragging?: string;
15
10
  };
16
11
  };
17
12
  type InputProps = InferProps<"input">;
13
+ type FileWithPreview = {
14
+ file: File | FileMeta;
15
+ id: string;
16
+ preview?: string;
17
+ };
18
+ type FileUploadState = {
19
+ errors: FileValidationErrorContext[];
20
+ filesWithPreview: FileWithPreview[];
21
+ isDragging: boolean;
22
+ };
23
+ type ChangeOrDragEvent = React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>;
24
+ type UseDropZoneResult = {
25
+ addFiles: (fileList: File[] | FileList | null, event?: ChangeOrDragEvent) => void;
26
+ clearErrors: () => void;
27
+ clearFiles: () => void;
28
+ dropZoneState: FileUploadState;
29
+ getInputProps: (inputProps?: InputProps) => InputProps;
30
+ getResolvedChildren: () => React.ReactNode;
31
+ getRootProps: (rootProps?: RootProps) => RootProps;
32
+ handleDragEnter: (event: React.DragEvent<HTMLElement>) => void;
33
+ handleDragLeave: (event: React.DragEvent<HTMLElement>) => void;
34
+ handleDragOver: (event: React.DragEvent<HTMLElement>) => void;
35
+ handleFileUpload: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>) => void;
36
+ inputRef: React.RefObject<HTMLInputElement | null>;
37
+ openFilePicker: () => void;
38
+ removeFile: (id: string) => void;
39
+ };
40
+ type RenderProps = Omit<UseDropZoneResult, "getResolvedChildren">;
18
41
  type DropZoneRenderProps = DiscriminatedRenderProps<React.ReactNode | ((props: RenderProps) => React.ReactNode)>;
19
42
  type UseDropZoneProps = DropZoneRenderProps & {
20
43
  /**
21
44
  * Allowed file types to be uploaded.
22
45
  */
23
46
  allowedFileTypes?: string[];
24
- classNames?: {
25
- activeDrag?: string;
26
- base?: string;
47
+ /**
48
+ * CSS classes to apply to the various parts of the drop zone
49
+ */
50
+ classNames?: Prettify<RootProps["classNames"] & {
27
51
  input?: string;
28
- };
52
+ }>;
29
53
  /**
30
54
  * Whether to disallow duplicate files
31
55
  * @default true
32
56
  */
33
57
  disallowDuplicates?: boolean;
34
- /**
35
- * Existing files to be uploaded
36
- */
37
- existingFiles?: File[];
38
58
  /**
39
59
  * Extra props to pass to the input element
40
60
  */
@@ -43,666 +63,69 @@ type UseDropZoneProps = DropZoneRenderProps & {
43
63
  * Extra props to pass to the root element
44
64
  */
45
65
  extraRootProps?: RootProps;
66
+ /**
67
+ * Initial files to populate the drop zone
68
+ */
69
+ initialFiles?: FileMeta | FileMeta[] | null;
46
70
  /**
47
71
  * Maximum number of files that can be uploaded.
48
72
  */
49
- fileLimit?: number;
73
+ maxFileCount?: number;
50
74
  /**
51
75
  * Maximum file size in MB
52
76
  */
53
77
  maxFileSize?: number;
54
78
  /**
55
- * Callback function to handle file upload
79
+ * Whether to allow multiple files to be uploaded
56
80
  */
57
- onUpload?: (details: {
58
- acceptedFiles: File[];
59
- event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>;
81
+ multiple?: boolean;
82
+ /**
83
+ * Callback function to be called when internal files state changes
84
+ */
85
+ onFilesChange?: (context: {
86
+ filesWithPreview: FileWithPreview[];
60
87
  }) => void;
61
88
  /**
62
- * Callback function to handle file upload errors
89
+ * Callback function to be called when new files are uploaded
90
+ */
91
+ onUpload?: (context: {
92
+ event: ChangeOrDragEvent;
93
+ filesWithPreview: FileWithPreview[];
94
+ }) => void;
95
+ /**
96
+ * Callback function to be called on each file upload as they occur
63
97
  */
64
98
  onUploadError?: FileValidationOptions["onError"];
65
99
  /**
66
- * Callback function to handle file upload success
100
+ * Callback function to be called once after all file upload errors have occurred
101
+ */
102
+ onUploadErrors?: FileValidationOptions["onErrors"];
103
+ /**
104
+ * Callback function to be called on file upload success
67
105
  */
68
106
  onUploadSuccess?: FileValidationOptions["onSuccess"];
69
107
  /**
70
108
  * Custom validator function to handle file validation
71
109
  */
72
- validator?: (context: {
73
- existingFileArray: File[] | undefined;
74
- newFileList: FileList;
75
- }) => File[];
110
+ validator?: FileValidationOptions["validator"];
76
111
  };
77
- declare const useDropZone: (props: UseDropZoneProps) => {
78
- acceptedFiles: File[];
79
- computedChildren: string | number | bigint | boolean | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | ((props: RenderProps) => React.ReactNode) | null | undefined;
80
- getChildren: () => react.ReactNode;
81
- getInputProps: (inputProps?: InputProps) => {
82
- accept: string | undefined;
83
- className: string;
84
- "data-active-drag": boolean;
85
- "data-part": string;
86
- "data-scope": string;
87
- onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
88
- ref: react.RefCallback<HTMLInputElement>;
89
- type: string;
90
- key?: react.Key | null | undefined;
91
- alt?: string | undefined;
92
- autoComplete?: react.HTMLInputAutoCompleteAttribute | undefined;
93
- capture?: boolean | "user" | "environment" | undefined;
94
- checked?: boolean | undefined;
95
- disabled?: boolean | undefined;
96
- form?: string | undefined;
97
- formAction?: string | ((formData: FormData) => void | Promise<void>) | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
98
- formEncType?: string | undefined;
99
- formMethod?: string | undefined;
100
- formNoValidate?: boolean | undefined;
101
- formTarget?: string | undefined;
102
- height?: number | string | undefined;
103
- list?: string | undefined;
104
- max?: number | string | undefined;
105
- maxLength?: number | undefined;
106
- min?: number | string | undefined;
107
- minLength?: number | undefined;
108
- multiple?: boolean | undefined;
109
- name?: string | undefined;
110
- pattern?: string | undefined;
111
- placeholder?: string | undefined;
112
- readOnly?: boolean | undefined;
113
- required?: boolean | undefined;
114
- size?: number | undefined;
115
- src?: string | undefined;
116
- step?: number | string | undefined;
117
- value?: string | readonly string[] | number | undefined;
118
- width?: number | string | undefined;
119
- defaultChecked?: boolean | undefined;
120
- defaultValue?: string | number | readonly string[] | undefined;
121
- suppressContentEditableWarning?: boolean | undefined;
122
- suppressHydrationWarning?: boolean | undefined;
123
- accessKey?: string | undefined;
124
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
125
- autoFocus?: boolean | undefined;
126
- contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
127
- contextMenu?: string | undefined;
128
- dir?: string | undefined;
129
- draggable?: (boolean | "true" | "false") | undefined;
130
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
131
- hidden?: boolean | undefined;
132
- id?: string | undefined;
133
- lang?: string | undefined;
134
- nonce?: string | undefined;
135
- slot?: string | undefined;
136
- spellCheck?: (boolean | "true" | "false") | undefined;
137
- style?: react.CSSProperties | undefined;
138
- tabIndex?: number | undefined;
139
- title?: string | undefined;
140
- translate?: "yes" | "no" | undefined;
141
- radioGroup?: string | undefined;
142
- role?: react.AriaRole | undefined;
143
- about?: string | undefined;
144
- content?: string | undefined;
145
- datatype?: string | undefined;
146
- inlist?: any;
147
- prefix?: string | undefined;
148
- property?: string | undefined;
149
- rel?: string | undefined;
150
- resource?: string | undefined;
151
- rev?: string | undefined;
152
- typeof?: string | undefined;
153
- vocab?: string | undefined;
154
- autoCorrect?: string | undefined;
155
- autoSave?: string | undefined;
156
- color?: string | undefined;
157
- itemProp?: string | undefined;
158
- itemScope?: boolean | undefined;
159
- itemType?: string | undefined;
160
- itemID?: string | undefined;
161
- itemRef?: string | undefined;
162
- results?: number | undefined;
163
- security?: string | undefined;
164
- unselectable?: "on" | "off" | undefined;
165
- popover?: "" | "auto" | "manual" | undefined;
166
- popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
167
- popoverTarget?: string | undefined;
168
- inert?: boolean | undefined;
169
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
170
- is?: string | undefined;
171
- exportparts?: string | undefined;
172
- part?: string | undefined;
173
- "aria-activedescendant"?: string | undefined;
174
- "aria-atomic"?: (boolean | "true" | "false") | undefined;
175
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
176
- "aria-braillelabel"?: string | undefined;
177
- "aria-brailleroledescription"?: string | undefined;
178
- "aria-busy"?: (boolean | "true" | "false") | undefined;
179
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
180
- "aria-colcount"?: number | undefined;
181
- "aria-colindex"?: number | undefined;
182
- "aria-colindextext"?: string | undefined;
183
- "aria-colspan"?: number | undefined;
184
- "aria-controls"?: string | undefined;
185
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
186
- "aria-describedby"?: string | undefined;
187
- "aria-description"?: string | undefined;
188
- "aria-details"?: string | undefined;
189
- "aria-disabled"?: (boolean | "true" | "false") | undefined;
190
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
191
- "aria-errormessage"?: string | undefined;
192
- "aria-expanded"?: (boolean | "true" | "false") | undefined;
193
- "aria-flowto"?: string | undefined;
194
- "aria-grabbed"?: (boolean | "true" | "false") | undefined;
195
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
196
- "aria-hidden"?: (boolean | "true" | "false") | undefined;
197
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
198
- "aria-keyshortcuts"?: string | undefined;
199
- "aria-label"?: string | undefined;
200
- "aria-labelledby"?: string | undefined;
201
- "aria-level"?: number | undefined;
202
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
203
- "aria-modal"?: (boolean | "true" | "false") | undefined;
204
- "aria-multiline"?: (boolean | "true" | "false") | undefined;
205
- "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
206
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
207
- "aria-owns"?: string | undefined;
208
- "aria-placeholder"?: string | undefined;
209
- "aria-posinset"?: number | undefined;
210
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
211
- "aria-readonly"?: (boolean | "true" | "false") | undefined;
212
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
213
- "aria-required"?: (boolean | "true" | "false") | undefined;
214
- "aria-roledescription"?: string | undefined;
215
- "aria-rowcount"?: number | undefined;
216
- "aria-rowindex"?: number | undefined;
217
- "aria-rowindextext"?: string | undefined;
218
- "aria-rowspan"?: number | undefined;
219
- "aria-selected"?: (boolean | "true" | "false") | undefined;
220
- "aria-setsize"?: number | undefined;
221
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
222
- "aria-valuemax"?: number | undefined;
223
- "aria-valuemin"?: number | undefined;
224
- "aria-valuenow"?: number | undefined;
225
- "aria-valuetext"?: string | undefined;
226
- children?: react.ReactNode | undefined;
227
- dangerouslySetInnerHTML?: {
228
- __html: string | TrustedHTML;
229
- } | undefined;
230
- onCopy?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
231
- onCopyCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
232
- onCut?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
233
- onCutCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
234
- onPaste?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
235
- onPasteCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
236
- onCompositionEnd?: react.CompositionEventHandler<HTMLInputElement> | undefined;
237
- onCompositionEndCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
238
- onCompositionStart?: react.CompositionEventHandler<HTMLInputElement> | undefined;
239
- onCompositionStartCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
240
- onCompositionUpdate?: react.CompositionEventHandler<HTMLInputElement> | undefined;
241
- onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
242
- onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
243
- onFocusCapture?: react.FocusEventHandler<HTMLInputElement> | undefined;
244
- onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
245
- onBlurCapture?: react.FocusEventHandler<HTMLInputElement> | undefined;
246
- onChangeCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
247
- onBeforeInput?: react.FormEventHandler<HTMLInputElement> | undefined;
248
- onBeforeInputCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
249
- onInput?: react.FormEventHandler<HTMLInputElement> | undefined;
250
- onInputCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
251
- onReset?: react.FormEventHandler<HTMLInputElement> | undefined;
252
- onResetCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
253
- onSubmit?: react.FormEventHandler<HTMLInputElement> | undefined;
254
- onSubmitCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
255
- onInvalid?: react.FormEventHandler<HTMLInputElement> | undefined;
256
- onInvalidCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
257
- onLoad?: react.ReactEventHandler<HTMLInputElement> | undefined;
258
- onLoadCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
259
- onError?: react.ReactEventHandler<HTMLInputElement> | undefined;
260
- onErrorCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
261
- onKeyDown?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
262
- onKeyDownCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
263
- onKeyPress?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
264
- onKeyPressCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
265
- onKeyUp?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
266
- onKeyUpCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
267
- onAbort?: react.ReactEventHandler<HTMLInputElement> | undefined;
268
- onAbortCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
269
- onCanPlay?: react.ReactEventHandler<HTMLInputElement> | undefined;
270
- onCanPlayCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
271
- onCanPlayThrough?: react.ReactEventHandler<HTMLInputElement> | undefined;
272
- onCanPlayThroughCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
273
- onDurationChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
274
- onDurationChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
275
- onEmptied?: react.ReactEventHandler<HTMLInputElement> | undefined;
276
- onEmptiedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
277
- onEncrypted?: react.ReactEventHandler<HTMLInputElement> | undefined;
278
- onEncryptedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
279
- onEnded?: react.ReactEventHandler<HTMLInputElement> | undefined;
280
- onEndedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
281
- onLoadedData?: react.ReactEventHandler<HTMLInputElement> | undefined;
282
- onLoadedDataCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
283
- onLoadedMetadata?: react.ReactEventHandler<HTMLInputElement> | undefined;
284
- onLoadedMetadataCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
285
- onLoadStart?: react.ReactEventHandler<HTMLInputElement> | undefined;
286
- onLoadStartCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
287
- onPause?: react.ReactEventHandler<HTMLInputElement> | undefined;
288
- onPauseCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
289
- onPlay?: react.ReactEventHandler<HTMLInputElement> | undefined;
290
- onPlayCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
291
- onPlaying?: react.ReactEventHandler<HTMLInputElement> | undefined;
292
- onPlayingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
293
- onProgress?: react.ReactEventHandler<HTMLInputElement> | undefined;
294
- onProgressCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
295
- onRateChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
296
- onRateChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
297
- onResize?: react.ReactEventHandler<HTMLInputElement> | undefined;
298
- onResizeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
299
- onSeeked?: react.ReactEventHandler<HTMLInputElement> | undefined;
300
- onSeekedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
301
- onSeeking?: react.ReactEventHandler<HTMLInputElement> | undefined;
302
- onSeekingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
303
- onStalled?: react.ReactEventHandler<HTMLInputElement> | undefined;
304
- onStalledCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
305
- onSuspend?: react.ReactEventHandler<HTMLInputElement> | undefined;
306
- onSuspendCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
307
- onTimeUpdate?: react.ReactEventHandler<HTMLInputElement> | undefined;
308
- onTimeUpdateCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
309
- onVolumeChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
310
- onVolumeChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
311
- onWaiting?: react.ReactEventHandler<HTMLInputElement> | undefined;
312
- onWaitingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
313
- onAuxClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
314
- onAuxClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
315
- onClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
316
- onClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
317
- onContextMenu?: react.MouseEventHandler<HTMLInputElement> | undefined;
318
- onContextMenuCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
319
- onDoubleClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
320
- onDoubleClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
321
- onDrag?: react.DragEventHandler<HTMLInputElement> | undefined;
322
- onDragCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
323
- onDragEnd?: react.DragEventHandler<HTMLInputElement> | undefined;
324
- onDragEndCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
325
- onDragEnter?: react.DragEventHandler<HTMLInputElement> | undefined;
326
- onDragEnterCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
327
- onDragExit?: react.DragEventHandler<HTMLInputElement> | undefined;
328
- onDragExitCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
329
- onDragLeave?: react.DragEventHandler<HTMLInputElement> | undefined;
330
- onDragLeaveCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
331
- onDragOver?: react.DragEventHandler<HTMLInputElement> | undefined;
332
- onDragOverCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
333
- onDragStart?: react.DragEventHandler<HTMLInputElement> | undefined;
334
- onDragStartCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
335
- onDrop?: react.DragEventHandler<HTMLInputElement> | undefined;
336
- onDropCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
337
- onMouseDown?: react.MouseEventHandler<HTMLInputElement> | undefined;
338
- onMouseDownCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
339
- onMouseEnter?: react.MouseEventHandler<HTMLInputElement> | undefined;
340
- onMouseLeave?: react.MouseEventHandler<HTMLInputElement> | undefined;
341
- onMouseMove?: react.MouseEventHandler<HTMLInputElement> | undefined;
342
- onMouseMoveCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
343
- onMouseOut?: react.MouseEventHandler<HTMLInputElement> | undefined;
344
- onMouseOutCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
345
- onMouseOver?: react.MouseEventHandler<HTMLInputElement> | undefined;
346
- onMouseOverCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
347
- onMouseUp?: react.MouseEventHandler<HTMLInputElement> | undefined;
348
- onMouseUpCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
349
- onSelect?: react.ReactEventHandler<HTMLInputElement> | undefined;
350
- onSelectCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
351
- onTouchCancel?: react.TouchEventHandler<HTMLInputElement> | undefined;
352
- onTouchCancelCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
353
- onTouchEnd?: react.TouchEventHandler<HTMLInputElement> | undefined;
354
- onTouchEndCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
355
- onTouchMove?: react.TouchEventHandler<HTMLInputElement> | undefined;
356
- onTouchMoveCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
357
- onTouchStart?: react.TouchEventHandler<HTMLInputElement> | undefined;
358
- onTouchStartCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
359
- onPointerDown?: react.PointerEventHandler<HTMLInputElement> | undefined;
360
- onPointerDownCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
361
- onPointerMove?: react.PointerEventHandler<HTMLInputElement> | undefined;
362
- onPointerMoveCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
363
- onPointerUp?: react.PointerEventHandler<HTMLInputElement> | undefined;
364
- onPointerUpCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
365
- onPointerCancel?: react.PointerEventHandler<HTMLInputElement> | undefined;
366
- onPointerCancelCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
367
- onPointerEnter?: react.PointerEventHandler<HTMLInputElement> | undefined;
368
- onPointerLeave?: react.PointerEventHandler<HTMLInputElement> | undefined;
369
- onPointerOver?: react.PointerEventHandler<HTMLInputElement> | undefined;
370
- onPointerOverCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
371
- onPointerOut?: react.PointerEventHandler<HTMLInputElement> | undefined;
372
- onPointerOutCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
373
- onGotPointerCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
374
- onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
375
- onLostPointerCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
376
- onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
377
- onScroll?: react.UIEventHandler<HTMLInputElement> | undefined;
378
- onScrollCapture?: react.UIEventHandler<HTMLInputElement> | undefined;
379
- onScrollEnd?: react.UIEventHandler<HTMLInputElement> | undefined;
380
- onScrollEndCapture?: react.UIEventHandler<HTMLInputElement> | undefined;
381
- onWheel?: react.WheelEventHandler<HTMLInputElement> | undefined;
382
- onWheelCapture?: react.WheelEventHandler<HTMLInputElement> | undefined;
383
- onAnimationStart?: react.AnimationEventHandler<HTMLInputElement> | undefined;
384
- onAnimationStartCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
385
- onAnimationEnd?: react.AnimationEventHandler<HTMLInputElement> | undefined;
386
- onAnimationEndCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
387
- onAnimationIteration?: react.AnimationEventHandler<HTMLInputElement> | undefined;
388
- onAnimationIterationCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
389
- onToggle?: react.ToggleEventHandler<HTMLInputElement> | undefined;
390
- onBeforeToggle?: react.ToggleEventHandler<HTMLInputElement> | undefined;
391
- onTransitionCancel?: react.TransitionEventHandler<HTMLInputElement> | undefined;
392
- onTransitionCancelCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
393
- onTransitionEnd?: react.TransitionEventHandler<HTMLInputElement> | undefined;
394
- onTransitionEndCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
395
- onTransitionRun?: react.TransitionEventHandler<HTMLInputElement> | undefined;
396
- onTransitionRunCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
397
- onTransitionStart?: react.TransitionEventHandler<HTMLInputElement> | undefined;
398
- onTransitionStartCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
399
- };
400
- getRenderProps: () => {
401
- acceptedFiles: File[];
402
- inputRef: react.RefObject<HTMLInputElement | null>;
403
- isDragging: boolean;
404
- openFilePicker: () => void | undefined;
405
- };
406
- getRootProps: (rootProps?: RootProps) => {
407
- className: string;
408
- "data-active-drag": boolean;
409
- "data-part": string;
410
- "data-scope": string;
411
- onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
412
- onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
413
- onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
414
- onDrop: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => void;
415
- ref?: react.Ref<HTMLDivElement> | undefined;
416
- key?: react.Key | null | undefined;
417
- defaultChecked?: boolean | undefined;
418
- defaultValue?: string | number | readonly string[] | undefined;
419
- suppressContentEditableWarning?: boolean | undefined;
420
- suppressHydrationWarning?: boolean | undefined;
421
- accessKey?: string | undefined;
422
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
423
- autoFocus?: boolean | undefined;
424
- contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
425
- contextMenu?: string | undefined;
426
- dir?: string | undefined;
427
- draggable?: (boolean | "true" | "false") | undefined;
428
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
429
- hidden?: boolean | undefined;
430
- id?: string | undefined;
431
- lang?: string | undefined;
432
- nonce?: string | undefined;
433
- slot?: string | undefined;
434
- spellCheck?: (boolean | "true" | "false") | undefined;
435
- style?: react.CSSProperties | undefined;
436
- tabIndex?: number | undefined;
437
- title?: string | undefined;
438
- translate?: "yes" | "no" | undefined;
439
- radioGroup?: string | undefined;
440
- role?: react.AriaRole | undefined;
441
- about?: string | undefined;
442
- content?: string | undefined;
443
- datatype?: string | undefined;
444
- inlist?: any;
445
- prefix?: string | undefined;
446
- property?: string | undefined;
447
- rel?: string | undefined;
448
- resource?: string | undefined;
449
- rev?: string | undefined;
450
- typeof?: string | undefined;
451
- vocab?: string | undefined;
452
- autoCorrect?: string | undefined;
453
- autoSave?: string | undefined;
454
- color?: string | undefined;
455
- itemProp?: string | undefined;
456
- itemScope?: boolean | undefined;
457
- itemType?: string | undefined;
458
- itemID?: string | undefined;
459
- itemRef?: string | undefined;
460
- results?: number | undefined;
461
- security?: string | undefined;
462
- unselectable?: "on" | "off" | undefined;
463
- popover?: "" | "auto" | "manual" | undefined;
464
- popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
465
- popoverTarget?: string | undefined;
466
- inert?: boolean | undefined;
467
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
468
- is?: string | undefined;
469
- exportparts?: string | undefined;
470
- part?: string | undefined;
471
- "aria-activedescendant"?: string | undefined;
472
- "aria-atomic"?: (boolean | "true" | "false") | undefined;
473
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
474
- "aria-braillelabel"?: string | undefined;
475
- "aria-brailleroledescription"?: string | undefined;
476
- "aria-busy"?: (boolean | "true" | "false") | undefined;
477
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
478
- "aria-colcount"?: number | undefined;
479
- "aria-colindex"?: number | undefined;
480
- "aria-colindextext"?: string | undefined;
481
- "aria-colspan"?: number | undefined;
482
- "aria-controls"?: string | undefined;
483
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
484
- "aria-describedby"?: string | undefined;
485
- "aria-description"?: string | undefined;
486
- "aria-details"?: string | undefined;
487
- "aria-disabled"?: (boolean | "true" | "false") | undefined;
488
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
489
- "aria-errormessage"?: string | undefined;
490
- "aria-expanded"?: (boolean | "true" | "false") | undefined;
491
- "aria-flowto"?: string | undefined;
492
- "aria-grabbed"?: (boolean | "true" | "false") | undefined;
493
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
494
- "aria-hidden"?: (boolean | "true" | "false") | undefined;
495
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
496
- "aria-keyshortcuts"?: string | undefined;
497
- "aria-label"?: string | undefined;
498
- "aria-labelledby"?: string | undefined;
499
- "aria-level"?: number | undefined;
500
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
501
- "aria-modal"?: (boolean | "true" | "false") | undefined;
502
- "aria-multiline"?: (boolean | "true" | "false") | undefined;
503
- "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
504
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
505
- "aria-owns"?: string | undefined;
506
- "aria-placeholder"?: string | undefined;
507
- "aria-posinset"?: number | undefined;
508
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
509
- "aria-readonly"?: (boolean | "true" | "false") | undefined;
510
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
511
- "aria-required"?: (boolean | "true" | "false") | undefined;
512
- "aria-roledescription"?: string | undefined;
513
- "aria-rowcount"?: number | undefined;
514
- "aria-rowindex"?: number | undefined;
515
- "aria-rowindextext"?: string | undefined;
516
- "aria-rowspan"?: number | undefined;
517
- "aria-selected"?: (boolean | "true" | "false") | undefined;
518
- "aria-setsize"?: number | undefined;
519
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
520
- "aria-valuemax"?: number | undefined;
521
- "aria-valuemin"?: number | undefined;
522
- "aria-valuenow"?: number | undefined;
523
- "aria-valuetext"?: string | undefined;
524
- children?: react.ReactNode | undefined;
525
- dangerouslySetInnerHTML?: {
526
- __html: string | TrustedHTML;
527
- } | undefined;
528
- onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
529
- onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
530
- onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
531
- onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
532
- onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
533
- onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
534
- onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
535
- onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
536
- onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
537
- onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
538
- onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
539
- onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
540
- onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
541
- onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
542
- onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
543
- onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
544
- onChange?: react.FormEventHandler<HTMLDivElement> | undefined;
545
- onChangeCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
546
- onBeforeInput?: react.FormEventHandler<HTMLDivElement> | undefined;
547
- onBeforeInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
548
- onInput?: react.FormEventHandler<HTMLDivElement> | undefined;
549
- onInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
550
- onReset?: react.FormEventHandler<HTMLDivElement> | undefined;
551
- onResetCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
552
- onSubmit?: react.FormEventHandler<HTMLDivElement> | undefined;
553
- onSubmitCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
554
- onInvalid?: react.FormEventHandler<HTMLDivElement> | undefined;
555
- onInvalidCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
556
- onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
557
- onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
558
- onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
559
- onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
560
- onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
561
- onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
562
- onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
563
- onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
564
- onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
565
- onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
566
- onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
567
- onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
568
- onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
569
- onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
570
- onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
571
- onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
572
- onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
573
- onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
574
- onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
575
- onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
576
- onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
577
- onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
578
- onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
579
- onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
580
- onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
581
- onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
582
- onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
583
- onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
584
- onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
585
- onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
586
- onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
587
- onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
588
- onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
589
- onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
590
- onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
591
- onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
592
- onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
593
- onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
594
- onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
595
- onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
596
- onResize?: react.ReactEventHandler<HTMLDivElement> | undefined;
597
- onResizeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
598
- onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
599
- onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
600
- onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
601
- onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
602
- onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
603
- onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
604
- onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
605
- onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
606
- onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
607
- onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
608
- onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
609
- onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
610
- onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
611
- onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
612
- onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
613
- onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
614
- onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
615
- onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
616
- onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
617
- onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
618
- onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
619
- onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
620
- onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
621
- onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
622
- onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
623
- onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
624
- onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
625
- onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
626
- onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
627
- onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
628
- onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
629
- onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
630
- onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
631
- onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
632
- onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
633
- onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
634
- onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
635
- onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
636
- onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
637
- onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
638
- onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
639
- onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
640
- onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
641
- onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
642
- onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
643
- onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
644
- onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
645
- onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
646
- onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
647
- onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
648
- onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
649
- onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
650
- onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
651
- onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
652
- onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
653
- onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
654
- onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
655
- onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
656
- onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
657
- onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
658
- onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
659
- onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
660
- onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
661
- onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
662
- onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
663
- onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
664
- onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
665
- onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
666
- onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
667
- onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
668
- onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
669
- onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
670
- onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
671
- onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
672
- onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
673
- onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
674
- onScrollEnd?: react.UIEventHandler<HTMLDivElement> | undefined;
675
- onScrollEndCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
676
- onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
677
- onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
678
- onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
679
- onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
680
- onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
681
- onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
682
- onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
683
- onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
684
- onToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
685
- onBeforeToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
686
- onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
687
- onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
688
- onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
689
- onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
690
- onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
691
- onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
692
- onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
693
- onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
694
- classNames?: {
695
- activeDrag?: string;
696
- base?: string;
697
- };
698
- };
699
- handleDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
700
- handleDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
701
- handleFileUpload: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => void;
702
- inputRef: react.RefObject<HTMLInputElement | null>;
703
- isDragging: boolean;
112
+ declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
113
+
114
+ type DropZoneProps = UseDropZoneProps & {
115
+ /**
116
+ * Controls whether to include internal elements (root and input) or not.
117
+ */
118
+ withInternalElements?: boolean;
119
+ };
120
+ declare function DropZoneRoot(props: DropZoneProps): react.JSX.Element;
121
+ declare const DropZoneImagePreview: {
122
+ (props: Pick<GetSlotComponentProps<string, react.ReactNode>, "children"> & Record<string, unknown>): react.ReactNode;
123
+ readonly slotName?: "preview" | undefined;
124
+ readonly slotSymbol?: symbol;
704
125
  };
705
126
 
706
- declare function DropZone(props: UseDropZoneProps): react.JSX.Element;
127
+ declare namespace dropZoneParts {
128
+ export { DropZoneImagePreview as ImagePreview, DropZoneRoot as Root };
129
+ }
707
130
 
708
- export { DropZone, type InputProps, type RootProps, type UseDropZoneProps, useDropZone };
131
+ export { dropZoneParts as DropZone, DropZoneImagePreview, DropZoneRoot, type FileUploadState, type FileWithPreview, type InputProps, type RootProps, type UseDropZoneProps, useDropZone };