@zayne-labs/ui-react 0.9.8 → 0.9.12
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.
- package/dist/esm/await-parts-BJ6C-y1f.d.ts +36 -0
- package/dist/esm/chunk-CLGH26AQ.js +337 -0
- package/dist/esm/chunk-CLGH26AQ.js.map +1 -0
- package/dist/esm/chunk-CWUEUCR5.js +3 -0
- package/dist/esm/chunk-CWUEUCR5.js.map +1 -0
- package/dist/esm/chunk-EYWTW54R.js +42 -0
- package/dist/esm/chunk-EYWTW54R.js.map +1 -0
- package/dist/esm/chunk-G5BNZM66.js +32 -0
- package/dist/esm/chunk-G5BNZM66.js.map +1 -0
- package/dist/esm/{chunk-IREUBYDK.js → chunk-JC52CA2O.js} +26 -23
- package/dist/esm/chunk-JC52CA2O.js.map +1 -0
- package/dist/esm/chunk-KLEJZWKY.js +45 -0
- package/dist/esm/chunk-KLEJZWKY.js.map +1 -0
- package/dist/esm/{chunk-V5DSTESN.js → chunk-M7YXNGT6.js} +3 -3
- package/dist/esm/{chunk-V5DSTESN.js.map → chunk-M7YXNGT6.js.map} +1 -1
- package/dist/esm/chunk-MT2MQDK2.js +13 -0
- package/dist/esm/chunk-MT2MQDK2.js.map +1 -0
- package/dist/esm/chunk-MY5NL5PB.js +627 -0
- package/dist/esm/chunk-MY5NL5PB.js.map +1 -0
- package/dist/esm/{chunk-XZRSR3EM.js → chunk-N4274N5K.js} +6 -2
- package/dist/esm/chunk-N4274N5K.js.map +1 -0
- package/dist/esm/chunk-V5ZPMMIH.js +121 -0
- package/dist/esm/chunk-V5ZPMMIH.js.map +1 -0
- package/dist/esm/{chunk-2P3P5AXH.js → chunk-Y5VBSXZS.js} +14 -7
- package/dist/esm/chunk-Y5VBSXZS.js.map +1 -0
- package/dist/esm/{chunk-IUEPHHGO.js → chunk-YO5LJ7ZJ.js} +2 -2
- package/dist/esm/{chunk-IUEPHHGO.js.map → chunk-YO5LJ7ZJ.js.map} +1 -1
- package/dist/esm/chunk-Z6JJE4G6.js +68 -0
- package/dist/esm/chunk-Z6JJE4G6.js.map +1 -0
- package/dist/esm/chunk-ZSDYJOYB.js +274 -0
- package/dist/esm/chunk-ZSDYJOYB.js.map +1 -0
- package/dist/esm/components/common/await/index.d.ts +10 -12
- package/dist/esm/components/common/await/index.js +5 -24
- package/dist/esm/components/common/await/index.js.map +1 -1
- package/dist/esm/components/common/error-boundary/index.d.ts +6 -30
- package/dist/esm/components/common/error-boundary/index.js +1 -2
- package/dist/esm/components/common/for/index.d.ts +6 -20
- package/dist/esm/components/common/index.d.ts +13 -0
- package/dist/esm/components/common/index.js +14 -0
- package/dist/esm/components/common/show/index.js +2 -2
- package/dist/esm/components/common/slot/index.d.ts +7 -3
- package/dist/esm/components/common/slot/index.js +1 -1
- package/dist/esm/components/common/suspense-with-boundary/index.d.ts +3 -3
- package/dist/esm/components/common/suspense-with-boundary/index.js +2 -12
- package/dist/esm/components/common/suspense-with-boundary/index.js.map +1 -1
- package/dist/esm/components/common/switch/index.js +3 -40
- package/dist/esm/components/common/switch/index.js.map +1 -1
- package/dist/esm/components/common/teleport/index.js +1 -29
- package/dist/esm/components/common/teleport/index.js.map +1 -1
- package/dist/esm/components/ui/card/index.js +4 -43
- package/dist/esm/components/ui/card/index.js.map +1 -1
- package/dist/esm/components/ui/carousel/index.js +14 -273
- package/dist/esm/components/ui/carousel/index.js.map +1 -1
- package/dist/esm/components/ui/drag-scroll/index.js +2 -119
- package/dist/esm/components/ui/drag-scroll/index.js.map +1 -1
- package/dist/esm/components/ui/drop-zone/index.d.ts +8 -181
- package/dist/esm/components/ui/drop-zone/index.js +15 -327
- package/dist/esm/components/ui/drop-zone/index.js.map +1 -1
- package/dist/esm/components/ui/form/index.js +7 -625
- package/dist/esm/components/ui/form/index.js.map +1 -1
- package/dist/esm/components/ui/index.d.ts +11 -0
- package/dist/esm/components/ui/index.js +21 -0
- package/dist/esm/drop-zone-parts-CvseSoXA.d.ts +186 -0
- package/dist/esm/error-boundary-BD0X61Sg.d.ts +28 -0
- package/dist/esm/for-8C6fFbN6.d.ts +21 -0
- package/dist/esm/{lib/utils/getSlotMap/index.d.ts → getSlotMap-DTkxtGhd.d.ts} +10 -8
- package/dist/esm/lib/utils/{getSlot/index.d.ts → index.d.ts} +1 -0
- package/dist/esm/lib/utils/index.js +5 -0
- package/dist/esm/lib/utils/index.js.map +1 -0
- package/dist/esm/{types-CeWumkhm.d.ts → types-mdfDDNrr.d.ts} +9 -6
- package/dist/style.css +1 -1
- package/package.json +17 -16
- package/dist/esm/chunk-2P3P5AXH.js.map +0 -1
- package/dist/esm/chunk-IREUBYDK.js.map +0 -1
- package/dist/esm/chunk-XZRSR3EM.js.map +0 -1
- package/dist/esm/lib/utils/getSlot/index.js +0 -4
- package/dist/esm/lib/utils/getSlotMap/index.js +0 -4
- /package/dist/esm/{lib/utils/getSlot → components/common}/index.js.map +0 -0
- /package/dist/esm/{lib/utils/getSlotMap → components/ui}/index.js.map +0 -0
|
@@ -1,184 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
classNames?: {
|
|
9
|
-
base?: string;
|
|
10
|
-
isDragging?: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
type InputProps = InferProps<"input">;
|
|
14
|
-
type FileWithPreview = {
|
|
15
|
-
/**
|
|
16
|
-
* File object or file metadata
|
|
17
|
-
*/
|
|
18
|
-
file: File | FileMeta;
|
|
19
|
-
/**
|
|
20
|
-
* Unique ID for the file
|
|
21
|
-
*/
|
|
22
|
-
id: string;
|
|
23
|
-
/**
|
|
24
|
-
* Preview URL for the file
|
|
25
|
-
* - Will be undefined if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image
|
|
26
|
-
* - Can also be undefined if `URL.createObjectURL` fails
|
|
27
|
-
*/
|
|
28
|
-
preview: string | undefined;
|
|
29
|
-
};
|
|
30
|
-
type DropZoneState = {
|
|
31
|
-
/**
|
|
32
|
-
* List of validation errors
|
|
33
|
-
*/
|
|
34
|
-
errors: FileValidationErrorContext[];
|
|
35
|
-
/**
|
|
36
|
-
* List of files with their preview URLs and unique IDs
|
|
37
|
-
*/
|
|
38
|
-
filesWithPreview: FileWithPreview[];
|
|
39
|
-
/**
|
|
40
|
-
* Whether or not a file is currently being dragged over the drop zone
|
|
41
|
-
*/
|
|
42
|
-
isDragging: boolean;
|
|
43
|
-
};
|
|
44
|
-
type ChangeOrDragEvent = React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>;
|
|
45
|
-
type DropZoneActions = {
|
|
46
|
-
addFiles: (fileList: File[] | FileList | null, event?: ChangeOrDragEvent) => void;
|
|
47
|
-
clearErrors: () => void;
|
|
48
|
-
clearFiles: () => void;
|
|
49
|
-
handleDragEnter: (event: React.DragEvent<HTMLElement>) => void;
|
|
50
|
-
handleDragLeave: (event: React.DragEvent<HTMLElement>) => void;
|
|
51
|
-
handleDragOver: (event: React.DragEvent<HTMLElement>) => void;
|
|
52
|
-
handleFileUpload: (event: ChangeOrDragEvent) => void;
|
|
53
|
-
openFilePicker: () => void;
|
|
54
|
-
removeFile: (fileToRemoveOrId: string | FileWithPreview) => void;
|
|
55
|
-
};
|
|
56
|
-
type UseDropZoneResult = {
|
|
57
|
-
dropZoneActions: DropZoneActions;
|
|
58
|
-
dropZoneState: DropZoneState;
|
|
59
|
-
getContainerProps: (containerProps?: ContainerProps) => ContainerProps;
|
|
60
|
-
getInputProps: (inputProps?: InputProps) => InputProps;
|
|
61
|
-
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
62
|
-
};
|
|
63
|
-
type UseDropZoneProps = {
|
|
64
|
-
/**
|
|
65
|
-
* Allowed file types to be uploaded.
|
|
66
|
-
*/
|
|
67
|
-
allowedFileTypes?: string[];
|
|
68
|
-
/**
|
|
69
|
-
* CSS classes to apply to the various parts of the drop zone
|
|
70
|
-
*/
|
|
71
|
-
classNames?: Prettify<ContainerProps["classNames"] & {
|
|
72
|
-
input?: string;
|
|
73
|
-
}>;
|
|
74
|
-
/**
|
|
75
|
-
* Whether to disallow duplicate files
|
|
76
|
-
* @default true
|
|
77
|
-
*/
|
|
78
|
-
disallowDuplicates?: boolean;
|
|
79
|
-
/**
|
|
80
|
-
* Whether to disallow preview for non-image files
|
|
81
|
-
* @default true
|
|
82
|
-
*/
|
|
83
|
-
disallowPreviewForNonImageFiles?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* Extra props to pass to the container element
|
|
86
|
-
*/
|
|
87
|
-
extraContainerProps?: ContainerProps;
|
|
88
|
-
/**
|
|
89
|
-
* Extra props to pass to the input element
|
|
90
|
-
*/
|
|
91
|
-
extraInputProps?: InputProps;
|
|
92
|
-
/**
|
|
93
|
-
* Initial files to populate the drop zone
|
|
94
|
-
*/
|
|
95
|
-
initialFiles?: FileMeta | FileMeta[] | null;
|
|
96
|
-
/**
|
|
97
|
-
* Maximum number of files that can be uploaded.
|
|
98
|
-
*/
|
|
99
|
-
maxFileCount?: number;
|
|
100
|
-
/**
|
|
101
|
-
* Maximum file size in MB
|
|
102
|
-
*/
|
|
103
|
-
maxFileSize?: number;
|
|
104
|
-
/**
|
|
105
|
-
* Whether to allow multiple files to be uploaded
|
|
106
|
-
*/
|
|
107
|
-
multiple?: boolean;
|
|
108
|
-
/**
|
|
109
|
-
* Callback function to be called when internal files state changes
|
|
110
|
-
*/
|
|
111
|
-
onFilesChange?: (context: {
|
|
112
|
-
filesWithPreview: FileWithPreview[];
|
|
113
|
-
}) => void;
|
|
114
|
-
/**
|
|
115
|
-
* Callback function to be called when the render props change
|
|
116
|
-
*/
|
|
117
|
-
onRenderPropsChange?: (props: UseDropZoneResult) => void;
|
|
118
|
-
/**
|
|
119
|
-
* Callback function to be called when new files are uploaded
|
|
120
|
-
*/
|
|
121
|
-
onUpload?: (context: {
|
|
122
|
-
event: ChangeOrDragEvent;
|
|
123
|
-
filesWithPreview: FileWithPreview[];
|
|
124
|
-
}) => void;
|
|
125
|
-
/**
|
|
126
|
-
* Callback function to be called on each file upload as they occur
|
|
127
|
-
*/
|
|
128
|
-
onUploadError?: FileValidationOptions["onError"];
|
|
129
|
-
/**
|
|
130
|
-
* Callback function to be called once after all file upload errors have occurred
|
|
131
|
-
*/
|
|
132
|
-
onUploadErrors?: FileValidationOptions["onErrors"];
|
|
133
|
-
/**
|
|
134
|
-
* Callback function to be called on file upload success
|
|
135
|
-
*/
|
|
136
|
-
onUploadSuccess?: FileValidationOptions["onSuccess"];
|
|
137
|
-
/**
|
|
138
|
-
* Custom validation function.
|
|
139
|
-
*
|
|
140
|
-
* If the function returns false, the file will be rejected
|
|
141
|
-
*/
|
|
142
|
-
validator?: NonNullable<FileValidationOptions["validationSettings"]>["validator"];
|
|
143
|
-
/**
|
|
144
|
-
* Custom validation function that runs after all file validation has occurred
|
|
145
|
-
*/
|
|
146
|
-
validatorForAllFiles?: FileValidationOptions["validatorForAllFiles"];
|
|
147
|
-
/**
|
|
148
|
-
* Whether to allow the default file picker via the file input element
|
|
149
|
-
* @default true
|
|
150
|
-
*/
|
|
151
|
-
withDefaultFilePicker?: boolean;
|
|
152
|
-
};
|
|
153
|
-
declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
|
|
154
|
-
|
|
155
|
-
type DropZoneRenderPropType = DiscriminatedRenderProps<React$1.ReactNode | ((props: UseDropZoneResult) => React$1.ReactNode)>;
|
|
156
|
-
type DropZoneRootProps = DropZoneRenderPropType & UseDropZoneProps & {
|
|
157
|
-
/**
|
|
158
|
-
* Controls whether to include internal elements (root and input) or not.
|
|
159
|
-
*/
|
|
160
|
-
withInternalElements?: boolean;
|
|
161
|
-
};
|
|
162
|
-
declare function DropZoneRoot(props: DropZoneRootProps): React$1.JSX.Element;
|
|
163
|
-
type DropZoneInputProps = InputProps & {
|
|
164
|
-
asChild?: boolean;
|
|
165
|
-
};
|
|
166
|
-
declare function DropZoneInput(props: DropZoneInputProps): React$1.JSX.Element;
|
|
167
|
-
type DropZoneContainerProps = ContainerProps & {
|
|
168
|
-
asChild?: boolean;
|
|
169
|
-
};
|
|
170
|
-
declare function DropZoneContainer<TElement extends React$1.ElementType = "div">(props: PolymorphicProps<TElement, DropZoneContainerProps>): React$1.JSX.Element;
|
|
171
|
-
type SlotComponentProps = GetSlotComponentProps<"preview", React$1.ReactNode | ((props: UseDropZoneResult) => React$1.ReactNode)>;
|
|
172
|
-
declare const DropZoneImagePreview: {
|
|
173
|
-
(props: Pick<SlotComponentProps, "children"> & Record<string, unknown>): React$1.ReactNode;
|
|
174
|
-
readonly slotName?: "preview" | undefined;
|
|
175
|
-
readonly slotSymbol?: symbol;
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
declare namespace dropZoneParts {
|
|
179
|
-
export { DropZoneContainer as Container, DropZoneImagePreview as ImagePreview, DropZoneInput as Input, DropZoneRoot as Root };
|
|
180
|
-
}
|
|
1
|
+
import { U as UseDropZoneResult } from '../../../drop-zone-parts-CvseSoXA.js';
|
|
2
|
+
export { C as ContainerProps, d as DropZone, i as DropZoneActions, e as DropZoneContainer, f as DropZoneContext, g as DropZoneImagePreview, c as DropZoneInput, D as DropZoneRenderPropType, b as DropZoneRoot, a as DropZoneRootProps, h as DropZoneState, F as FileWithPreview, I as InputProps, j as UseDropZoneProps, u as useDropZone } from '../../../drop-zone-parts-CvseSoXA.js';
|
|
3
|
+
import 'react';
|
|
4
|
+
import '../../../getSlotMap-DTkxtGhd.js';
|
|
5
|
+
import '@zayne-labs/toolkit-type-helpers';
|
|
6
|
+
import '@zayne-labs/toolkit-react/utils';
|
|
7
|
+
import '@zayne-labs/toolkit-core';
|
|
181
8
|
|
|
182
9
|
declare const useDropZoneContext: () => UseDropZoneResult;
|
|
183
10
|
|
|
184
|
-
export {
|
|
11
|
+
export { UseDropZoneResult, useDropZoneContext };
|
|
@@ -1,329 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
providerName: "DropZoneRoot"
|
|
17
|
-
});
|
|
18
|
-
var generateUniqueId = (file) => {
|
|
19
|
-
if (!isFile(file)) {
|
|
20
|
-
return file.id;
|
|
21
|
-
}
|
|
22
|
-
return `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;
|
|
23
|
-
};
|
|
24
|
-
var createObjectURL = (file, disallowPreviewForNonImageFiles) => {
|
|
25
|
-
if (disallowPreviewForNonImageFiles && !file.type.startsWith("image/")) return;
|
|
26
|
-
return createImagePreview(file);
|
|
27
|
-
};
|
|
28
|
-
var clearObjectURL = (fileWithPreview, disallowPreviewForNonImageFiles) => {
|
|
29
|
-
if (!isFile(fileWithPreview?.file)) return;
|
|
30
|
-
if (disallowPreviewForNonImageFiles && !fileWithPreview.file.type.startsWith("image/")) return;
|
|
31
|
-
if (!fileWithPreview.preview) return;
|
|
32
|
-
URL.revokeObjectURL(fileWithPreview.preview);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
// src/components/ui/drop-zone/use-drop-zone.ts
|
|
36
|
-
var useDropZone = (props) => {
|
|
37
|
-
const {
|
|
38
|
-
allowedFileTypes,
|
|
39
|
-
classNames,
|
|
40
|
-
disallowDuplicates = true,
|
|
41
|
-
disallowPreviewForNonImageFiles = true,
|
|
42
|
-
extraContainerProps,
|
|
43
|
-
extraInputProps,
|
|
44
|
-
initialFiles,
|
|
45
|
-
maxFileCount,
|
|
46
|
-
maxFileSize,
|
|
47
|
-
multiple,
|
|
48
|
-
onFilesChange,
|
|
49
|
-
onRenderPropsChange,
|
|
50
|
-
onUpload,
|
|
51
|
-
onUploadError,
|
|
52
|
-
onUploadErrors,
|
|
53
|
-
onUploadSuccess,
|
|
54
|
-
validator,
|
|
55
|
-
validatorForAllFiles,
|
|
56
|
-
withDefaultFilePicker = true
|
|
57
|
-
} = props ?? {};
|
|
58
|
-
const inputRef = useRef(null);
|
|
59
|
-
const initialFileArray = toArray(initialFiles).filter(Boolean);
|
|
60
|
-
const [dropZoneState, setDropZoneState] = useState({
|
|
61
|
-
errors: [],
|
|
62
|
-
filesWithPreview: initialFileArray.map((fileMeta) => ({
|
|
63
|
-
file: fileMeta,
|
|
64
|
-
id: fileMeta.id,
|
|
65
|
-
preview: fileMeta.url
|
|
66
|
-
})),
|
|
67
|
-
isDragging: false
|
|
68
|
-
});
|
|
69
|
-
const toggleIsDragging = (value) => {
|
|
70
|
-
setDropZoneState((prevState) => ({ ...prevState, isDragging: value }));
|
|
71
|
-
};
|
|
72
|
-
const addFiles = useCallbackRef((fileList, event) => {
|
|
73
|
-
if (!fileList || fileList.length === 0) {
|
|
74
|
-
console.warn("No file selected!");
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
clearErrors();
|
|
78
|
-
if (!multiple) {
|
|
79
|
-
clearFiles();
|
|
80
|
-
}
|
|
81
|
-
const { errors, validFiles } = handleFileValidation({
|
|
82
|
-
existingFiles: dropZoneState.filesWithPreview.map((fileWithPreview) => fileWithPreview.file),
|
|
83
|
-
newFiles: fileList,
|
|
84
|
-
onError: onUploadError,
|
|
85
|
-
onErrors: onUploadErrors,
|
|
86
|
-
onSuccess: onUploadSuccess,
|
|
87
|
-
validationSettings: {
|
|
88
|
-
allowedFileTypes,
|
|
89
|
-
disallowDuplicates,
|
|
90
|
-
maxFileCount,
|
|
91
|
-
maxFileSize,
|
|
92
|
-
validator
|
|
93
|
-
},
|
|
94
|
-
validatorForAllFiles
|
|
95
|
-
});
|
|
96
|
-
if (validFiles.length === 0) {
|
|
97
|
-
setDropZoneState((prevState) => ({ ...prevState, errors }));
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
const filesWithPreview = validFiles.map((file) => ({
|
|
101
|
-
file,
|
|
102
|
-
id: generateUniqueId(file),
|
|
103
|
-
preview: createObjectURL(file, disallowPreviewForNonImageFiles)
|
|
104
|
-
}));
|
|
105
|
-
if (event) {
|
|
106
|
-
onUpload?.({ event, filesWithPreview });
|
|
107
|
-
}
|
|
108
|
-
const newFileUploadState = {
|
|
109
|
-
...dropZoneState,
|
|
110
|
-
errors,
|
|
111
|
-
...event?.type === "drop" && { isDragging: false },
|
|
112
|
-
filesWithPreview: multiple ? [...dropZoneState.filesWithPreview, ...filesWithPreview] : filesWithPreview
|
|
113
|
-
};
|
|
114
|
-
onFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });
|
|
115
|
-
setDropZoneState(newFileUploadState);
|
|
116
|
-
inputRef.current && (inputRef.current.value = "");
|
|
117
|
-
});
|
|
118
|
-
const clearFiles = useCallbackRef(() => {
|
|
119
|
-
dropZoneState.filesWithPreview.forEach(
|
|
120
|
-
(fileWithPreview) => clearObjectURL(fileWithPreview, disallowPreviewForNonImageFiles)
|
|
121
|
-
);
|
|
122
|
-
const newFileUploadState = {
|
|
123
|
-
...dropZoneState,
|
|
124
|
-
errors: [],
|
|
125
|
-
filesWithPreview: []
|
|
126
|
-
};
|
|
127
|
-
onFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });
|
|
128
|
-
setDropZoneState(newFileUploadState);
|
|
129
|
-
inputRef.current && (inputRef.current.value = "");
|
|
130
|
-
});
|
|
131
|
-
const removeFile = useCallbackRef((fileToRemoveOrId) => {
|
|
132
|
-
const actualFileToRemove = isString(fileToRemoveOrId) ? dropZoneState.filesWithPreview.find((file) => file.id === fileToRemoveOrId) : fileToRemoveOrId;
|
|
133
|
-
if (!actualFileToRemove) return;
|
|
134
|
-
clearObjectURL(actualFileToRemove, disallowPreviewForNonImageFiles);
|
|
135
|
-
const newFilesWithPreview = dropZoneState.filesWithPreview.filter(
|
|
136
|
-
(file) => file.id !== actualFileToRemove.id
|
|
137
|
-
);
|
|
138
|
-
onFilesChange?.({ filesWithPreview: newFilesWithPreview });
|
|
139
|
-
setDropZoneState({
|
|
140
|
-
...dropZoneState,
|
|
141
|
-
errors: [],
|
|
142
|
-
filesWithPreview: newFilesWithPreview
|
|
143
|
-
});
|
|
144
|
-
});
|
|
145
|
-
const clearErrors = useCallbackRef(() => {
|
|
146
|
-
setDropZoneState((prevState) => ({ ...prevState, errors: [] }));
|
|
147
|
-
});
|
|
148
|
-
const handleFileUpload = useCallbackRef((event) => {
|
|
149
|
-
if (inputRef.current?.disabled) return;
|
|
150
|
-
if (event.type === "drop") {
|
|
151
|
-
event.preventDefault();
|
|
152
|
-
event.stopPropagation();
|
|
153
|
-
}
|
|
154
|
-
const fileList = event.type === "drop" ? event.dataTransfer.files : event.target.files;
|
|
155
|
-
if (!multiple) {
|
|
156
|
-
const firstFile = fileList?.[0];
|
|
157
|
-
firstFile && addFiles([firstFile], event);
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
addFiles(fileList, event);
|
|
161
|
-
});
|
|
162
|
-
const handleDragEnter = useCallbackRef((event) => {
|
|
163
|
-
event.preventDefault();
|
|
164
|
-
event.stopPropagation();
|
|
165
|
-
toggleIsDragging(true);
|
|
166
|
-
});
|
|
167
|
-
const handleDragOver = useCallbackRef((event) => {
|
|
168
|
-
event.preventDefault();
|
|
169
|
-
event.stopPropagation();
|
|
170
|
-
toggleIsDragging(true);
|
|
171
|
-
});
|
|
172
|
-
const handleDragLeave = useCallbackRef((event) => {
|
|
173
|
-
event.preventDefault();
|
|
174
|
-
event.stopPropagation();
|
|
175
|
-
toggleIsDragging(false);
|
|
176
|
-
});
|
|
177
|
-
const openFilePicker = useCallbackRef(() => {
|
|
178
|
-
inputRef.current?.click();
|
|
179
|
-
});
|
|
180
|
-
const getContainerProps = useCallback(
|
|
181
|
-
(containerProps) => {
|
|
182
|
-
const mergedContainerProps = mergeTwoProps(extraContainerProps, containerProps);
|
|
183
|
-
return {
|
|
184
|
-
...mergedContainerProps,
|
|
185
|
-
className: cnMerge(
|
|
186
|
-
"relative isolate flex flex-col",
|
|
187
|
-
mergedContainerProps.className,
|
|
188
|
-
classNames?.base,
|
|
189
|
-
dropZoneState.isDragging && [
|
|
190
|
-
"opacity-60",
|
|
191
|
-
classNames?.isDragging,
|
|
192
|
-
containerProps?.classNames?.isDragging
|
|
193
|
-
]
|
|
194
|
-
),
|
|
195
|
-
"data-dragging": dataAttr(dropZoneState.isDragging),
|
|
196
|
-
"data-scope": "dropzone",
|
|
197
|
-
// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first
|
|
198
|
-
"data-part": "container",
|
|
199
|
-
"data-slot": "dropzone-container",
|
|
200
|
-
onDragEnter: composeTwoEventHandlers(handleDragEnter, mergedContainerProps.onDragEnter),
|
|
201
|
-
onDragLeave: composeTwoEventHandlers(handleDragLeave, mergedContainerProps.onDragLeave),
|
|
202
|
-
onDragOver: composeTwoEventHandlers(handleDragOver, mergedContainerProps.onDragOver),
|
|
203
|
-
onDrop: composeTwoEventHandlers(handleFileUpload, mergedContainerProps.onDrop)
|
|
204
|
-
};
|
|
205
|
-
},
|
|
206
|
-
[
|
|
207
|
-
classNames?.base,
|
|
208
|
-
classNames?.isDragging,
|
|
209
|
-
extraContainerProps,
|
|
210
|
-
dropZoneState.isDragging,
|
|
211
|
-
handleDragEnter,
|
|
212
|
-
handleDragLeave,
|
|
213
|
-
handleDragOver,
|
|
214
|
-
handleFileUpload
|
|
215
|
-
]
|
|
216
|
-
);
|
|
217
|
-
const getInputProps = useCallback(
|
|
218
|
-
(inputProps) => {
|
|
219
|
-
const mergedInputProps = mergeTwoProps(extraInputProps, inputProps);
|
|
220
|
-
return {
|
|
221
|
-
...mergedInputProps,
|
|
222
|
-
accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
|
|
223
|
-
className: cnMerge(
|
|
224
|
-
withDefaultFilePicker ? "absolute inset-0 z-[100] cursor-pointer opacity-0" : "hidden",
|
|
225
|
-
classNames?.input,
|
|
226
|
-
mergedInputProps.className
|
|
227
|
-
),
|
|
228
|
-
"data-dragging": dataAttr(dropZoneState.isDragging),
|
|
229
|
-
"data-scope": "dropzone",
|
|
230
|
-
// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first
|
|
231
|
-
"data-part": "input",
|
|
232
|
-
"data-slot": "dropzone-input",
|
|
233
|
-
multiple: multiple ?? mergedInputProps.multiple,
|
|
234
|
-
onChange: composeTwoEventHandlers(handleFileUpload, mergedInputProps.onChange),
|
|
235
|
-
ref: composeRefs(inputRef, mergedInputProps.ref),
|
|
236
|
-
type: "file"
|
|
237
|
-
};
|
|
238
|
-
},
|
|
239
|
-
[
|
|
240
|
-
allowedFileTypes,
|
|
241
|
-
classNames?.input,
|
|
242
|
-
extraInputProps,
|
|
243
|
-
dropZoneState.isDragging,
|
|
244
|
-
handleFileUpload,
|
|
245
|
-
multiple,
|
|
246
|
-
withDefaultFilePicker
|
|
247
|
-
]
|
|
248
|
-
);
|
|
249
|
-
const savedOnRenderPropsChange = useCallbackRef(onRenderPropsChange);
|
|
250
|
-
const dropZoneResult = useMemo(() => {
|
|
251
|
-
const propsForRenderFn = {
|
|
252
|
-
dropZoneActions: {
|
|
253
|
-
addFiles,
|
|
254
|
-
clearErrors,
|
|
255
|
-
clearFiles,
|
|
256
|
-
handleDragEnter,
|
|
257
|
-
handleDragLeave,
|
|
258
|
-
handleDragOver,
|
|
259
|
-
handleFileUpload,
|
|
260
|
-
openFilePicker,
|
|
261
|
-
removeFile
|
|
262
|
-
},
|
|
263
|
-
dropZoneState,
|
|
264
|
-
getContainerProps,
|
|
265
|
-
getInputProps,
|
|
266
|
-
inputRef
|
|
267
|
-
};
|
|
268
|
-
savedOnRenderPropsChange(propsForRenderFn);
|
|
269
|
-
return propsForRenderFn;
|
|
270
|
-
}, [
|
|
271
|
-
savedOnRenderPropsChange,
|
|
272
|
-
addFiles,
|
|
273
|
-
clearErrors,
|
|
274
|
-
clearFiles,
|
|
275
|
-
dropZoneState,
|
|
276
|
-
getInputProps,
|
|
277
|
-
getContainerProps,
|
|
278
|
-
handleDragEnter,
|
|
279
|
-
handleDragLeave,
|
|
280
|
-
handleDragOver,
|
|
281
|
-
handleFileUpload,
|
|
282
|
-
openFilePicker,
|
|
283
|
-
removeFile
|
|
284
|
-
]);
|
|
285
|
-
return dropZoneResult;
|
|
286
|
-
};
|
|
287
|
-
|
|
288
|
-
// src/components/ui/drop-zone/drop-zone.tsx
|
|
289
|
-
function DropZoneRoot(props) {
|
|
290
|
-
const { children, render, withInternalElements = true, ...restOfProps } = props;
|
|
291
|
-
const dropZone = useDropZone(restOfProps);
|
|
292
|
-
const ContainerComponent = withInternalElements ? DropZoneContainer : Fragment;
|
|
293
|
-
const InputComponent = withInternalElements ? DropZoneInput : Fragment;
|
|
294
|
-
const selectedChildren = children ?? render;
|
|
295
|
-
const resolvedChildren = isFunction(selectedChildren) ? selectedChildren(dropZone) : selectedChildren;
|
|
296
|
-
const couldChildrenContainSlots = isArray(resolvedChildren) || isValidElement(resolvedChildren) && resolvedChildren.type === Fragment;
|
|
297
|
-
const slots = withInternalElements && couldChildrenContainSlots ? getSlotMap(resolvedChildren) : { default: resolvedChildren };
|
|
298
|
-
return /* @__PURE__ */ React.createElement(DropZoneContextProvider, { value: dropZone }, /* @__PURE__ */ React.createElement(ContainerComponent, null, /* @__PURE__ */ React.createElement(InputComponent, null), slots.default), slots.preview);
|
|
299
|
-
}
|
|
300
|
-
function DropZoneInput(props) {
|
|
301
|
-
const { asChild, ...restOfProps } = props;
|
|
302
|
-
const dropZoneContext = useDropZoneContext();
|
|
303
|
-
const Component = asChild ? Slot : "input";
|
|
304
|
-
return /* @__PURE__ */ React.createElement(Component, { ...dropZoneContext.getInputProps(restOfProps) });
|
|
305
|
-
}
|
|
306
|
-
function DropZoneContainer(props) {
|
|
307
|
-
const { as: Element = "div", asChild, ...restOfProps } = props;
|
|
308
|
-
const dropZoneContext = useDropZoneContext();
|
|
309
|
-
const Component = asChild ? Slot : Element;
|
|
310
|
-
return /* @__PURE__ */ React.createElement(Component, { ...dropZoneContext.getContainerProps(restOfProps) });
|
|
311
|
-
}
|
|
312
|
-
var DropZoneImagePreview = withSlotNameAndSymbol("preview", (props) => {
|
|
313
|
-
const { children } = props;
|
|
314
|
-
const dropZoneContext = useDropZoneContext();
|
|
315
|
-
return isFunction(children) ? children(dropZoneContext) : children;
|
|
316
|
-
});
|
|
317
|
-
|
|
318
|
-
// src/components/ui/drop-zone/drop-zone-parts.ts
|
|
319
|
-
var drop_zone_parts_exports = {};
|
|
320
|
-
__export(drop_zone_parts_exports, {
|
|
321
|
-
Container: () => DropZoneContainer,
|
|
322
|
-
ImagePreview: () => DropZoneImagePreview,
|
|
323
|
-
Input: () => DropZoneInput,
|
|
324
|
-
Root: () => DropZoneRoot
|
|
325
|
-
});
|
|
326
|
-
|
|
327
|
-
export { drop_zone_parts_exports as DropZone, DropZoneContainer, DropZoneImagePreview, DropZoneInput, DropZoneRoot, useDropZone, useDropZoneContext };
|
|
1
|
+
export { drop_zone_parts_exports as DropZone, DropZoneContainer, DropZoneContext, DropZoneImagePreview, DropZoneInput, DropZoneRoot, useDropZone, useDropZoneContext } from '../../../chunk-CLGH26AQ.js';
|
|
2
|
+
import '../../../chunk-DNYM6XGW.js';
|
|
3
|
+
import '../../../chunk-OHG7GB7O.js';
|
|
4
|
+
import '../../../chunk-CWUEUCR5.js';
|
|
5
|
+
import '../../../chunk-MT2MQDK2.js';
|
|
6
|
+
import '../../../chunk-EYWTW54R.js';
|
|
7
|
+
import '../../../chunk-G5BNZM66.js';
|
|
8
|
+
import '../../../chunk-Z6JJE4G6.js';
|
|
9
|
+
import '../../../chunk-N4274N5K.js';
|
|
10
|
+
import '../../../chunk-JC52CA2O.js';
|
|
11
|
+
import '../../../chunk-ZNL6YLIM.js';
|
|
12
|
+
import '../../../chunk-M7YXNGT6.js';
|
|
13
|
+
import '../../../chunk-YO5LJ7ZJ.js';
|
|
14
|
+
import '../../../chunk-Y5VBSXZS.js';
|
|
15
|
+
import '../../../chunk-PZ5AY32C.js';
|
|
328
16
|
//# sourceMappingURL=index.js.map
|
|
329
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/ui/drop-zone/drop-context.ts","../../../../../src/components/ui/drop-zone/utils.ts","../../../../../src/components/ui/drop-zone/use-drop-zone.ts","../../../../../src/components/ui/drop-zone/drop-zone.tsx","../../../../../src/components/ui/drop-zone/drop-zone-parts.ts"],"names":["ReactFragment"],"mappings":"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","file":"index.js","sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport type { UseDropZoneResult } from \"./use-drop-zone\";\n\ntype DropZoneContext = UseDropZoneResult;\n\nexport const [DropZoneContextProvider, useDropZoneContext] = createCustomContext<DropZoneContext>({\n\thookName: \"useDropZoneContext\",\n\tname: \"DropZoneContext\",\n\tproviderName: \"DropZoneRoot\",\n});\n","import { type FileMeta, createImagePreview } from \"@zayne-labs/toolkit-core\";\nimport { isFile } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { FileWithPreview } from \"./use-drop-zone\";\n\nexport const generateUniqueId = (file: File | FileMeta): string => {\n\tif (!isFile(file)) {\n\t\treturn file.id;\n\t}\n\n\treturn `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;\n};\n\nexport const createObjectURL = (file: File, disallowPreviewForNonImageFiles: boolean) => {\n\tif (disallowPreviewForNonImageFiles && !file.type.startsWith(\"image/\")) return;\n\n\treturn createImagePreview(file);\n};\n\nexport const clearObjectURL = (\n\tfileWithPreview: FileWithPreview | undefined,\n\tdisallowPreviewForNonImageFiles: boolean\n) => {\n\tif (!isFile(fileWithPreview?.file)) return;\n\n\tif (disallowPreviewForNonImageFiles && !fileWithPreview.file.type.startsWith(\"image/\")) return;\n\n\tif (!fileWithPreview.preview) return;\n\n\tURL.revokeObjectURL(fileWithPreview.preview);\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { dataAttr } from \"@/lib/utils/common\";\nimport {\n\ttype FileMeta,\n\ttype FileValidationErrorContext,\n\ttype FileValidationOptions,\n\thandleFileValidation,\n\ttoArray,\n} from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport {\n\ttype InferProps,\n\tcomposeRefs,\n\tcomposeTwoEventHandlers,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { type Prettify, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { clearObjectURL, createObjectURL, generateUniqueId } from \"./utils\";\n\nexport type ContainerProps = InferProps<HTMLElement> & {\n\tclassNames?: {\n\t\tbase?: string;\n\t\tisDragging?: string;\n\t};\n};\n\nexport type InputProps = InferProps<\"input\">;\n\nexport type FileWithPreview = {\n\t/**\n\t * File object or file metadata\n\t */\n\tfile: File | FileMeta;\n\t/**\n\t * Unique ID for the file\n\t */\n\tid: string;\n\t/**\n\t * Preview URL for the file\n\t * - Will be undefined if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image\n\t * - Can also be undefined if `URL.createObjectURL` fails\n\t */\n\tpreview: string | undefined;\n};\n\nexport type DropZoneState = {\n\t/**\n\t * List of validation errors\n\t */\n\terrors: FileValidationErrorContext[];\n\t/**\n\t * List of files with their preview URLs and unique IDs\n\t */\n\tfilesWithPreview: FileWithPreview[];\n\t/**\n\t * Whether or not a file is currently being dragged over the drop zone\n\t */\n\tisDragging: boolean;\n};\n\ntype ChangeOrDragEvent = React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>;\n\nexport type DropZoneActions = {\n\taddFiles: (fileList: File[] | FileList | null, event?: ChangeOrDragEvent) => void;\n\tclearErrors: () => void;\n\tclearFiles: () => void;\n\thandleDragEnter: (event: React.DragEvent<HTMLElement>) => void;\n\thandleDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n\thandleDragOver: (event: React.DragEvent<HTMLElement>) => void;\n\thandleFileUpload: (event: ChangeOrDragEvent) => void;\n\topenFilePicker: () => void;\n\tremoveFile: (fileToRemoveOrId: string | FileWithPreview) => void;\n};\n\nexport type UseDropZoneResult = {\n\tdropZoneActions: DropZoneActions;\n\tdropZoneState: DropZoneState;\n\tgetContainerProps: (containerProps?: ContainerProps) => ContainerProps;\n\tgetInputProps: (inputProps?: InputProps) => InputProps;\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n};\n\nexport type UseDropZoneProps = {\n\t/**\n\t * Allowed file types to be uploaded.\n\t */\n\tallowedFileTypes?: string[];\n\n\t/**\n\t * CSS classes to apply to the various parts of the drop zone\n\t */\n\tclassNames?: Prettify<ContainerProps[\"classNames\"] & { input?: string }>;\n\n\t/**\n\t * Whether to disallow duplicate files\n\t * @default true\n\t */\n\tdisallowDuplicates?: boolean;\n\n\t/**\n\t * Whether to disallow preview for non-image files\n\t * @default true\n\t */\n\tdisallowPreviewForNonImageFiles?: boolean;\n\n\t/**\n\t * Extra props to pass to the container element\n\t */\n\textraContainerProps?: ContainerProps;\n\n\t/**\n\t * Extra props to pass to the input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Initial files to populate the drop zone\n\t */\n\tinitialFiles?: FileMeta | FileMeta[] | null;\n\n\t/**\n\t * Maximum number of files that can be uploaded.\n\t */\n\tmaxFileCount?: number;\n\n\t/**\n\t * Maximum file size in MB\n\t */\n\tmaxFileSize?: number;\n\n\t/**\n\t * Whether to allow multiple files to be uploaded\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * Callback function to be called when internal files state changes\n\t */\n\tonFilesChange?: (context: { filesWithPreview: FileWithPreview[] }) => void;\n\n\t/**\n\t * Callback function to be called when the render props change\n\t */\n\tonRenderPropsChange?: (props: UseDropZoneResult) => void;\n\n\t/**\n\t * Callback function to be called when new files are uploaded\n\t */\n\tonUpload?: (context: { event: ChangeOrDragEvent; filesWithPreview: FileWithPreview[] }) => void;\n\n\t/**\n\t * Callback function to be called on each file upload as they occur\n\t */\n\tonUploadError?: FileValidationOptions[\"onError\"];\n\n\t/**\n\t * Callback function to be called once after all file upload errors have occurred\n\t */\n\tonUploadErrors?: FileValidationOptions[\"onErrors\"];\n\n\t/**\n\t * Callback function to be called on file upload success\n\t */\n\tonUploadSuccess?: FileValidationOptions[\"onSuccess\"];\n\n\t/**\n\t * Custom validation function.\n\t *\n\t * If the function returns false, the file will be rejected\n\t */\n\tvalidator?: NonNullable<FileValidationOptions[\"validationSettings\"]>[\"validator\"];\n\n\t/**\n\t * Custom validation function that runs after all file validation has occurred\n\t */\n\tvalidatorForAllFiles?: FileValidationOptions[\"validatorForAllFiles\"];\n\n\t/**\n\t * Whether to allow the default file picker via the file input element\n\t * @default true\n\t */\n\twithDefaultFilePicker?: boolean;\n};\n\nexport const useDropZone = (props?: UseDropZoneProps): UseDropZoneResult => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\tdisallowPreviewForNonImageFiles = true,\n\t\textraContainerProps,\n\t\textraInputProps,\n\t\tinitialFiles,\n\t\tmaxFileCount,\n\t\tmaxFileSize,\n\t\tmultiple,\n\t\tonFilesChange,\n\t\tonRenderPropsChange,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadErrors,\n\t\tonUploadSuccess,\n\t\tvalidator,\n\t\tvalidatorForAllFiles,\n\t\twithDefaultFilePicker = true,\n\t} = props ?? {};\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst initialFileArray = toArray(initialFiles).filter(Boolean);\n\n\tconst [dropZoneState, setDropZoneState] = useState<DropZoneState>({\n\t\terrors: [],\n\t\tfilesWithPreview: initialFileArray.map((fileMeta) => ({\n\t\t\tfile: fileMeta,\n\t\t\tid: fileMeta.id,\n\t\t\tpreview: fileMeta.url,\n\t\t})),\n\t\tisDragging: false,\n\t});\n\n\tconst toggleIsDragging = (value: boolean) => {\n\t\tsetDropZoneState((prevState) => ({ ...prevState, isDragging: value }));\n\t};\n\n\tconst addFiles: DropZoneActions[\"addFiles\"] = useCallbackRef((fileList, event) => {\n\t\tif (!fileList || fileList.length === 0) {\n\t\t\tconsole.warn(\"No file selected!\");\n\t\t\treturn;\n\t\t}\n\n\t\t// Clear existing errors when new files are uploaded\n\t\tclearErrors();\n\n\t\t// In single file mode, clear existing files first\n\t\tif (!multiple) {\n\t\t\tclearFiles();\n\t\t}\n\n\t\tconst { errors, validFiles } = handleFileValidation({\n\t\t\texistingFiles: dropZoneState.filesWithPreview.map((fileWithPreview) => fileWithPreview.file),\n\t\t\tnewFiles: fileList,\n\t\t\tonError: onUploadError,\n\t\t\tonErrors: onUploadErrors,\n\t\t\tonSuccess: onUploadSuccess,\n\t\t\tvalidationSettings: {\n\t\t\t\tallowedFileTypes,\n\t\t\t\tdisallowDuplicates,\n\t\t\t\tmaxFileCount,\n\t\t\t\tmaxFileSize,\n\t\t\t\tvalidator,\n\t\t\t},\n\t\t\tvalidatorForAllFiles,\n\t\t});\n\n\t\tif (validFiles.length === 0) {\n\t\t\tsetDropZoneState((prevState) => ({ ...prevState, errors }));\n\t\t\treturn;\n\t\t}\n\n\t\tconst filesWithPreview: FileWithPreview[] = validFiles.map((file) => ({\n\t\t\tfile,\n\t\t\tid: generateUniqueId(file),\n\t\t\tpreview: createObjectURL(file, disallowPreviewForNonImageFiles),\n\t\t}));\n\n\t\t// == Only call onUpload callback if event is provided, which indicates that new files were uploaded from an event handler\n\n\t\tif (event) {\n\t\t\tonUpload?.({ event, filesWithPreview });\n\t\t}\n\n\t\tconst newFileUploadState = {\n\t\t\t...dropZoneState,\n\t\t\terrors,\n\t\t\t...(event?.type === \"drop\" && { isDragging: false }),\n\t\t\tfilesWithPreview: multiple\n\t\t\t\t? [...dropZoneState.filesWithPreview, ...filesWithPreview]\n\t\t\t\t: filesWithPreview,\n\t\t} satisfies DropZoneState;\n\n\t\tonFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });\n\n\t\tsetDropZoneState(newFileUploadState);\n\n\t\t// == Reset input value after adding files\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t});\n\n\tconst clearFiles: DropZoneActions[\"clearFiles\"] = useCallbackRef(() => {\n\t\t// == Clean up object URLs if any\n\t\tdropZoneState.filesWithPreview.forEach((fileWithPreview) =>\n\t\t\tclearObjectURL(fileWithPreview, disallowPreviewForNonImageFiles)\n\t\t);\n\n\t\tconst newFileUploadState = {\n\t\t\t...dropZoneState,\n\t\t\terrors: [],\n\t\t\tfilesWithPreview: [],\n\t\t} satisfies DropZoneState;\n\n\t\tonFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });\n\n\t\tsetDropZoneState(newFileUploadState);\n\n\t\t// == Reset input value after clearing files\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t});\n\n\tconst removeFile: DropZoneActions[\"removeFile\"] = useCallbackRef((fileToRemoveOrId) => {\n\t\tconst actualFileToRemove = isString(fileToRemoveOrId)\n\t\t\t? dropZoneState.filesWithPreview.find((file) => file.id === fileToRemoveOrId)\n\t\t\t: fileToRemoveOrId;\n\n\t\tif (!actualFileToRemove) return;\n\n\t\tclearObjectURL(actualFileToRemove, disallowPreviewForNonImageFiles);\n\n\t\tconst newFilesWithPreview = dropZoneState.filesWithPreview.filter(\n\t\t\t(file) => file.id !== actualFileToRemove.id\n\t\t);\n\n\t\tonFilesChange?.({ filesWithPreview: newFilesWithPreview });\n\n\t\tsetDropZoneState({\n\t\t\t...dropZoneState,\n\t\t\terrors: [],\n\t\t\tfilesWithPreview: newFilesWithPreview,\n\t\t});\n\t});\n\n\tconst clearErrors: DropZoneActions[\"clearErrors\"] = useCallbackRef(() => {\n\t\tsetDropZoneState((prevState) => ({ ...prevState, errors: [] }));\n\t});\n\n\tconst handleFileUpload: DropZoneActions[\"handleFileUpload\"] = useCallbackRef((event) => {\n\t\tif (inputRef.current?.disabled) return;\n\n\t\tif (event.type === \"drop\") {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tconst fileList =\n\t\t\tevent.type === \"drop\"\n\t\t\t\t? (event as React.DragEvent).dataTransfer.files\n\t\t\t\t: (event as React.ChangeEvent<HTMLInputElement>).target.files;\n\n\t\t// == In single file mode, only use the first file\n\t\tif (!multiple) {\n\t\t\tconst firstFile = fileList?.[0];\n\n\t\t\tfirstFile && addFiles([firstFile], event);\n\n\t\t\treturn;\n\t\t}\n\n\t\taddFiles(fileList, event);\n\t});\n\n\tconst handleDragEnter: DropZoneActions[\"handleDragEnter\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(true);\n\t});\n\n\tconst handleDragOver: DropZoneActions[\"handleDragOver\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(true);\n\t});\n\n\tconst handleDragLeave: DropZoneActions[\"handleDragLeave\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(false);\n\t});\n\n\tconst openFilePicker: DropZoneActions[\"openFilePicker\"] = useCallbackRef(() => {\n\t\tinputRef.current?.click();\n\t});\n\n\tconst getContainerProps: UseDropZoneResult[\"getContainerProps\"] = useCallback(\n\t\t(containerProps) => {\n\t\t\tconst mergedContainerProps = mergeTwoProps(extraContainerProps, containerProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedContainerProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\t\tmergedContainerProps.className,\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tdropZoneState.isDragging && [\n\t\t\t\t\t\t\"opacity-60\",\n\t\t\t\t\t\tclassNames?.isDragging,\n\t\t\t\t\t\tcontainerProps?.classNames?.isDragging,\n\t\t\t\t\t]\n\t\t\t\t),\n\t\t\t\t\"data-dragging\": dataAttr(dropZoneState.isDragging),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"container\",\n\t\t\t\t\"data-slot\": \"dropzone-container\",\n\t\t\t\tonDragEnter: composeTwoEventHandlers(handleDragEnter, mergedContainerProps.onDragEnter),\n\t\t\t\tonDragLeave: composeTwoEventHandlers(handleDragLeave, mergedContainerProps.onDragLeave),\n\t\t\t\tonDragOver: composeTwoEventHandlers(handleDragOver, mergedContainerProps.onDragOver),\n\t\t\t\tonDrop: composeTwoEventHandlers(handleFileUpload, mergedContainerProps.onDrop),\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tclassNames?.base,\n\t\t\tclassNames?.isDragging,\n\t\t\textraContainerProps,\n\t\t\tdropZoneState.isDragging,\n\t\t\thandleDragEnter,\n\t\t\thandleDragLeave,\n\t\t\thandleDragOver,\n\t\t\thandleFileUpload,\n\t\t]\n\t);\n\n\tconst getInputProps: UseDropZoneResult[\"getInputProps\"] = useCallback(\n\t\t(inputProps) => {\n\t\t\tconst mergedInputProps = mergeTwoProps(extraInputProps, inputProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedInputProps,\n\t\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\twithDefaultFilePicker ? \"absolute inset-0 z-[100] cursor-pointer opacity-0\" : \"hidden\",\n\t\t\t\t\tclassNames?.input,\n\t\t\t\t\tmergedInputProps.className\n\t\t\t\t),\n\t\t\t\t\"data-dragging\": dataAttr(dropZoneState.isDragging),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"input\",\n\t\t\t\t\"data-slot\": \"dropzone-input\",\n\t\t\t\tmultiple: multiple ?? mergedInputProps.multiple,\n\t\t\t\tonChange: composeTwoEventHandlers(handleFileUpload, mergedInputProps.onChange),\n\t\t\t\tref: composeRefs(inputRef, mergedInputProps.ref),\n\t\t\t\ttype: \"file\",\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tallowedFileTypes,\n\t\t\tclassNames?.input,\n\t\t\textraInputProps,\n\t\t\tdropZoneState.isDragging,\n\t\t\thandleFileUpload,\n\t\t\tmultiple,\n\t\t\twithDefaultFilePicker,\n\t\t]\n\t);\n\n\tconst savedOnRenderPropsChange = useCallbackRef(onRenderPropsChange);\n\n\tconst dropZoneResult = useMemo(() => {\n\t\tconst propsForRenderFn = {\n\t\t\tdropZoneActions: {\n\t\t\t\taddFiles,\n\t\t\t\tclearErrors,\n\t\t\t\tclearFiles,\n\t\t\t\thandleDragEnter,\n\t\t\t\thandleDragLeave,\n\t\t\t\thandleDragOver,\n\t\t\t\thandleFileUpload,\n\t\t\t\topenFilePicker,\n\t\t\t\tremoveFile,\n\t\t\t},\n\t\t\tdropZoneState,\n\t\t\tgetContainerProps,\n\t\t\tgetInputProps,\n\t\t\tinputRef,\n\t\t} satisfies UseDropZoneResult;\n\n\t\tsavedOnRenderPropsChange(propsForRenderFn);\n\n\t\treturn propsForRenderFn;\n\t}, [\n\t\tsavedOnRenderPropsChange,\n\t\taddFiles,\n\t\tclearErrors,\n\t\tclearFiles,\n\t\tdropZoneState,\n\t\tgetInputProps,\n\t\tgetContainerProps,\n\t\thandleDragEnter,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\topenFilePicker,\n\t\tremoveFile,\n\t]);\n\n\treturn dropZoneResult;\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { Slot } from \"@/components/common\";\nimport { type GetSlotComponentProps, getSlotMap, withSlotNameAndSymbol } from \"@/lib/utils/getSlotMap\";\nimport type { DiscriminatedRenderProps, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Fragment as ReactFragment, isValidElement } from \"react\";\nimport { DropZoneContextProvider, useDropZoneContext } from \"./drop-context\";\nimport {\n\ttype ContainerProps,\n\ttype InputProps,\n\ttype UseDropZoneProps,\n\ttype UseDropZoneResult,\n\tuseDropZone,\n} from \"./use-drop-zone\";\n\nexport type DropZoneRenderPropType = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: UseDropZoneResult) => React.ReactNode)\n>;\n\nexport type DropZoneRootProps = DropZoneRenderPropType\n\t& UseDropZoneProps & {\n\t\t/**\n\t\t * Controls whether to include internal elements (root and input) or not.\n\t\t */\n\t\twithInternalElements?: boolean;\n\t};\n\nexport function DropZoneRoot(props: DropZoneRootProps) {\n\tconst { children, render, withInternalElements = true, ...restOfProps } = props;\n\n\tconst dropZone = useDropZone(restOfProps);\n\n\tconst ContainerComponent = withInternalElements ? DropZoneContainer : ReactFragment;\n\tconst InputComponent = withInternalElements ? DropZoneInput : ReactFragment;\n\n\tconst selectedChildren = children ?? render;\n\n\tconst resolvedChildren = isFunction(selectedChildren) ? selectedChildren(dropZone) : selectedChildren;\n\n\tconst couldChildrenContainSlots =\n\t\tisArray(resolvedChildren)\n\t\t|| (isValidElement(resolvedChildren) && resolvedChildren.type === ReactFragment);\n\n\tconst slots =\n\t\twithInternalElements && couldChildrenContainSlots\n\t\t\t? getSlotMap<SlotComponentProps>(resolvedChildren)\n\t\t\t: ({ default: resolvedChildren } as ReturnType<typeof getSlotMap<SlotComponentProps>>);\n\n\treturn (\n\t\t<DropZoneContextProvider value={dropZone}>\n\t\t\t<ContainerComponent>\n\t\t\t\t<InputComponent />\n\n\t\t\t\t{slots.default}\n\t\t\t</ContainerComponent>\n\n\t\t\t{slots.preview}\n\t\t</DropZoneContextProvider>\n\t);\n}\n\ntype DropZoneInputProps = InputProps & { asChild?: boolean };\n\nexport function DropZoneInput(props: DropZoneInputProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst dropZoneContext = useDropZoneContext();\n\n\tconst Component = asChild ? Slot : \"input\";\n\n\treturn <Component {...dropZoneContext.getInputProps(restOfProps)} />;\n}\n\ntype DropZoneContainerProps = ContainerProps & { asChild?: boolean };\n\nexport function DropZoneContainer<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement, DropZoneContainerProps>\n) {\n\tconst { as: Element = \"div\", asChild, ...restOfProps } = props;\n\n\tconst dropZoneContext = useDropZoneContext();\n\n\tconst Component = asChild ? Slot : Element;\n\n\treturn <Component {...dropZoneContext.getContainerProps(restOfProps)} />;\n}\n\ntype SlotComponentProps = GetSlotComponentProps<\n\t\"preview\",\n\tReact.ReactNode | ((props: UseDropZoneResult) => React.ReactNode)\n>;\n\nexport const DropZoneImagePreview = withSlotNameAndSymbol<SlotComponentProps>(\"preview\", (props) => {\n\tconst { children } = props;\n\n\tconst dropZoneContext = useDropZoneContext();\n\n\treturn isFunction(children) ? children(dropZoneContext) : children;\n});\n","export {\n\tDropZoneRoot as Root,\n\tDropZoneImagePreview as ImagePreview,\n\tDropZoneInput as Input,\n\tDropZoneContainer as Container,\n} from \"./drop-zone\";\n"]}
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|