@zayne-labs/ui-react 0.8.10 → 0.8.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/css/preset.css +1 -0
- package/css/style.css +2 -0
- package/css/theme.css +0 -14
- package/css/utilities.css +7 -0
- package/dist/esm/{chunk-L2SROZYQ.js → chunk-2P3P5AXH.js} +5 -4
- package/dist/esm/chunk-2P3P5AXH.js.map +1 -0
- package/dist/esm/common/await/index.d.ts +5 -5
- package/dist/esm/common/await/index.js +4 -6
- package/dist/esm/common/await/index.js.map +1 -1
- package/dist/esm/common/error-boundary/index.d.ts +3 -3
- package/dist/esm/common/for/index.d.ts +6 -6
- package/dist/esm/common/show/index.d.ts +8 -8
- package/dist/esm/common/slot/index.d.ts +3 -3
- package/dist/esm/common/slot/index.js +1 -1
- package/dist/esm/common/suspense-with-boundary/index.d.ts +2 -2
- package/dist/esm/common/switch/index.d.ts +7 -7
- package/dist/esm/common/teleport/index.d.ts +4 -4
- package/dist/esm/common/teleport/index.js +11 -10
- package/dist/esm/common/teleport/index.js.map +1 -1
- package/dist/esm/ui/card/index.d.ts +8 -8
- package/dist/esm/ui/card/index.js +2 -2
- package/dist/esm/ui/card/index.js.map +1 -1
- package/dist/esm/ui/carousel/index.d.ts +11 -11
- package/dist/esm/ui/drag-scroll/index.d.ts +9 -298
- package/dist/esm/ui/drag-scroll/index.js +9 -7
- package/dist/esm/ui/drag-scroll/index.js.map +1 -1
- package/dist/esm/ui/drop-zone/index.d.ts +3 -3
- package/dist/esm/ui/drop-zone/index.js +7 -11
- package/dist/esm/ui/drop-zone/index.js.map +1 -1
- package/dist/esm/ui/form/index.d.ts +35 -35
- package/dist/esm/ui/form/index.js +6 -6
- package/dist/esm/ui/form/index.js.map +1 -1
- package/dist/style.css +467 -0
- package/package.json +12 -14
- package/dist/esm/chunk-L2SROZYQ.js.map +0 -1
|
@@ -1,310 +1,21 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { RefCallback } from 'react';
|
|
3
1
|
import { InferProps } from '@zayne-labs/toolkit-react/utils';
|
|
4
2
|
|
|
5
|
-
type
|
|
3
|
+
type ItemProps<TItemElement extends HTMLElement> = InferProps<TItemElement>;
|
|
4
|
+
type RootProps<TElement extends HTMLElement> = InferProps<TElement>;
|
|
5
|
+
type DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {
|
|
6
6
|
classNames?: {
|
|
7
7
|
base?: string;
|
|
8
8
|
item?: string;
|
|
9
9
|
};
|
|
10
|
-
extraItemProps?:
|
|
11
|
-
extraRootProps?:
|
|
10
|
+
extraItemProps?: ItemProps<TItemElement>;
|
|
11
|
+
extraRootProps?: InferProps<TElement>;
|
|
12
12
|
orientation?: "both" | "horizontal" | "vertical";
|
|
13
13
|
usage?: "allScreens" | "desktopOnly" | "mobileAndTabletOnly";
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
getItemProps:
|
|
17
|
-
|
|
18
|
-
"data-part": string;
|
|
19
|
-
"data-scope": string;
|
|
20
|
-
defaultChecked?: boolean | undefined;
|
|
21
|
-
defaultValue?: string | number | readonly string[] | undefined;
|
|
22
|
-
suppressContentEditableWarning?: boolean | undefined;
|
|
23
|
-
suppressHydrationWarning?: boolean | undefined;
|
|
24
|
-
accessKey?: string | undefined;
|
|
25
|
-
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
|
|
26
|
-
autoFocus?: boolean | undefined;
|
|
27
|
-
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
28
|
-
contextMenu?: string | undefined;
|
|
29
|
-
dir?: string | undefined;
|
|
30
|
-
draggable?: (boolean | "true" | "false") | undefined;
|
|
31
|
-
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
32
|
-
hidden?: boolean | undefined;
|
|
33
|
-
id?: string | undefined;
|
|
34
|
-
lang?: string | undefined;
|
|
35
|
-
nonce?: string | undefined;
|
|
36
|
-
slot?: string | undefined;
|
|
37
|
-
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
38
|
-
style?: react.CSSProperties | undefined;
|
|
39
|
-
tabIndex?: number | undefined;
|
|
40
|
-
title?: string | undefined;
|
|
41
|
-
translate?: "yes" | "no" | undefined;
|
|
42
|
-
radioGroup?: string | undefined;
|
|
43
|
-
role?: react.AriaRole | undefined;
|
|
44
|
-
about?: string | undefined;
|
|
45
|
-
content?: string | undefined;
|
|
46
|
-
datatype?: string | undefined;
|
|
47
|
-
inlist?: any;
|
|
48
|
-
prefix?: string | undefined;
|
|
49
|
-
property?: string | undefined;
|
|
50
|
-
rel?: string | undefined;
|
|
51
|
-
resource?: string | undefined;
|
|
52
|
-
rev?: string | undefined;
|
|
53
|
-
typeof?: string | undefined;
|
|
54
|
-
vocab?: string | undefined;
|
|
55
|
-
autoCorrect?: string | undefined;
|
|
56
|
-
autoSave?: string | undefined;
|
|
57
|
-
color?: string | undefined;
|
|
58
|
-
itemProp?: string | undefined;
|
|
59
|
-
itemScope?: boolean | undefined;
|
|
60
|
-
itemType?: string | undefined;
|
|
61
|
-
itemID?: string | undefined;
|
|
62
|
-
itemRef?: string | undefined;
|
|
63
|
-
results?: number | undefined;
|
|
64
|
-
security?: string | undefined;
|
|
65
|
-
unselectable?: "on" | "off" | undefined;
|
|
66
|
-
popover?: "" | "auto" | "manual" | undefined;
|
|
67
|
-
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
|
|
68
|
-
popoverTarget?: string | undefined;
|
|
69
|
-
inert?: boolean | undefined;
|
|
70
|
-
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
|
|
71
|
-
is?: string | undefined;
|
|
72
|
-
exportparts?: string | undefined;
|
|
73
|
-
part?: string | undefined;
|
|
74
|
-
"aria-activedescendant"?: string | undefined;
|
|
75
|
-
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
76
|
-
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
|
|
77
|
-
"aria-braillelabel"?: string | undefined;
|
|
78
|
-
"aria-brailleroledescription"?: string | undefined;
|
|
79
|
-
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
80
|
-
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
|
|
81
|
-
"aria-colcount"?: number | undefined;
|
|
82
|
-
"aria-colindex"?: number | undefined;
|
|
83
|
-
"aria-colindextext"?: string | undefined;
|
|
84
|
-
"aria-colspan"?: number | undefined;
|
|
85
|
-
"aria-controls"?: string | undefined;
|
|
86
|
-
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
87
|
-
"aria-describedby"?: string | undefined;
|
|
88
|
-
"aria-description"?: string | undefined;
|
|
89
|
-
"aria-details"?: string | undefined;
|
|
90
|
-
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
91
|
-
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
|
|
92
|
-
"aria-errormessage"?: string | undefined;
|
|
93
|
-
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
94
|
-
"aria-flowto"?: string | undefined;
|
|
95
|
-
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
96
|
-
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
|
|
97
|
-
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
98
|
-
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
99
|
-
"aria-keyshortcuts"?: string | undefined;
|
|
100
|
-
"aria-label"?: string | undefined;
|
|
101
|
-
"aria-labelledby"?: string | undefined;
|
|
102
|
-
"aria-level"?: number | undefined;
|
|
103
|
-
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
104
|
-
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
105
|
-
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
106
|
-
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
107
|
-
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
108
|
-
"aria-owns"?: string | undefined;
|
|
109
|
-
"aria-placeholder"?: string | undefined;
|
|
110
|
-
"aria-posinset"?: number | undefined;
|
|
111
|
-
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
|
|
112
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
113
|
-
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
|
|
114
|
-
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
115
|
-
"aria-roledescription"?: string | undefined;
|
|
116
|
-
"aria-rowcount"?: number | undefined;
|
|
117
|
-
"aria-rowindex"?: number | undefined;
|
|
118
|
-
"aria-rowindextext"?: string | undefined;
|
|
119
|
-
"aria-rowspan"?: number | undefined;
|
|
120
|
-
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
121
|
-
"aria-setsize"?: number | undefined;
|
|
122
|
-
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
123
|
-
"aria-valuemax"?: number | undefined;
|
|
124
|
-
"aria-valuemin"?: number | undefined;
|
|
125
|
-
"aria-valuenow"?: number | undefined;
|
|
126
|
-
"aria-valuetext"?: string | undefined;
|
|
127
|
-
children?: react.ReactNode | undefined;
|
|
128
|
-
dangerouslySetInnerHTML?: {
|
|
129
|
-
__html: string | TrustedHTML;
|
|
130
|
-
} | undefined;
|
|
131
|
-
onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
|
|
132
|
-
onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
|
|
133
|
-
onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
|
|
134
|
-
onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
|
|
135
|
-
onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
|
|
136
|
-
onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
|
|
137
|
-
onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
|
|
138
|
-
onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
|
|
139
|
-
onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
|
|
140
|
-
onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
|
|
141
|
-
onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
|
|
142
|
-
onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
|
|
143
|
-
onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
|
|
144
|
-
onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
|
|
145
|
-
onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
|
|
146
|
-
onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
|
|
147
|
-
onChange?: react.FormEventHandler<HTMLElement> | undefined;
|
|
148
|
-
onChangeCapture?: react.FormEventHandler<HTMLElement> | undefined;
|
|
149
|
-
onBeforeInput?: react.FormEventHandler<HTMLElement> | undefined;
|
|
150
|
-
onBeforeInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
|
|
151
|
-
onInput?: react.FormEventHandler<HTMLElement> | undefined;
|
|
152
|
-
onInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
|
|
153
|
-
onReset?: react.FormEventHandler<HTMLElement> | undefined;
|
|
154
|
-
onResetCapture?: react.FormEventHandler<HTMLElement> | undefined;
|
|
155
|
-
onSubmit?: react.FormEventHandler<HTMLElement> | undefined;
|
|
156
|
-
onSubmitCapture?: react.FormEventHandler<HTMLElement> | undefined;
|
|
157
|
-
onInvalid?: react.FormEventHandler<HTMLElement> | undefined;
|
|
158
|
-
onInvalidCapture?: react.FormEventHandler<HTMLElement> | undefined;
|
|
159
|
-
onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
160
|
-
onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
161
|
-
onError?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
162
|
-
onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
163
|
-
onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
|
|
164
|
-
onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
|
|
165
|
-
onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
|
|
166
|
-
onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
|
|
167
|
-
onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
|
|
168
|
-
onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
|
|
169
|
-
onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
170
|
-
onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
171
|
-
onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
172
|
-
onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
173
|
-
onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
174
|
-
onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
175
|
-
onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
176
|
-
onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
177
|
-
onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
178
|
-
onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
179
|
-
onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
180
|
-
onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
181
|
-
onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
182
|
-
onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
183
|
-
onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
184
|
-
onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
185
|
-
onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
186
|
-
onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
187
|
-
onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
188
|
-
onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
189
|
-
onPause?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
190
|
-
onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
191
|
-
onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
192
|
-
onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
193
|
-
onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
194
|
-
onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
195
|
-
onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
196
|
-
onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
197
|
-
onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
198
|
-
onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
199
|
-
onResize?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
200
|
-
onResizeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
201
|
-
onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
202
|
-
onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
203
|
-
onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
204
|
-
onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
205
|
-
onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
206
|
-
onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
207
|
-
onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
208
|
-
onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
209
|
-
onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
210
|
-
onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
211
|
-
onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
212
|
-
onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
213
|
-
onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
214
|
-
onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
215
|
-
onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
216
|
-
onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
217
|
-
onClick?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
218
|
-
onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
219
|
-
onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
220
|
-
onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
221
|
-
onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
222
|
-
onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
223
|
-
onDrag?: react.DragEventHandler<HTMLElement> | undefined;
|
|
224
|
-
onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
225
|
-
onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
|
|
226
|
-
onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
227
|
-
onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
|
|
228
|
-
onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
229
|
-
onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
|
|
230
|
-
onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
231
|
-
onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
|
|
232
|
-
onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
233
|
-
onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
|
|
234
|
-
onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
235
|
-
onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
|
|
236
|
-
onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
237
|
-
onDrop?: react.DragEventHandler<HTMLElement> | undefined;
|
|
238
|
-
onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
|
|
239
|
-
onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
240
|
-
onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
241
|
-
onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
242
|
-
onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
243
|
-
onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
244
|
-
onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
245
|
-
onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
246
|
-
onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
247
|
-
onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
248
|
-
onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
249
|
-
onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
250
|
-
onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
|
|
251
|
-
onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
252
|
-
onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
|
|
253
|
-
onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
254
|
-
onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
255
|
-
onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
256
|
-
onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
257
|
-
onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
258
|
-
onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
259
|
-
onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
260
|
-
onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
|
|
261
|
-
onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
262
|
-
onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
263
|
-
onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
264
|
-
onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
265
|
-
onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
266
|
-
onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
267
|
-
onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
268
|
-
onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
269
|
-
onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
270
|
-
onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
271
|
-
onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
272
|
-
onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
273
|
-
onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
274
|
-
onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
275
|
-
onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
276
|
-
onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
277
|
-
onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
278
|
-
onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
|
|
279
|
-
onScroll?: react.UIEventHandler<HTMLElement> | undefined;
|
|
280
|
-
onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
|
|
281
|
-
onScrollEnd?: react.UIEventHandler<HTMLElement> | undefined;
|
|
282
|
-
onScrollEndCapture?: react.UIEventHandler<HTMLElement> | undefined;
|
|
283
|
-
onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
|
|
284
|
-
onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
|
|
285
|
-
onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
|
|
286
|
-
onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
|
|
287
|
-
onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
|
|
288
|
-
onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
|
|
289
|
-
onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
|
|
290
|
-
onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
|
|
291
|
-
onToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
|
|
292
|
-
onBeforeToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
|
|
293
|
-
onTransitionCancel?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
294
|
-
onTransitionCancelCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
295
|
-
onTransitionEnd?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
296
|
-
onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
297
|
-
onTransitionRun?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
298
|
-
onTransitionRunCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
299
|
-
onTransitionStart?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
300
|
-
onTransitionStartCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
|
|
301
|
-
};
|
|
302
|
-
getRootProps: (rootProps?: DragScrollProps<TElement>["extraRootProps"]) => Omit<InferProps<TElement>, "children"> & {
|
|
303
|
-
className: string;
|
|
304
|
-
"data-part": string;
|
|
305
|
-
"data-scope": string;
|
|
306
|
-
ref: RefCallback<TElement>;
|
|
307
|
-
};
|
|
15
|
+
type DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {
|
|
16
|
+
getItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;
|
|
17
|
+
getRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;
|
|
308
18
|
};
|
|
19
|
+
declare const useDragScroll: <TElement extends HTMLElement, TItemElement extends HTMLElement>(props?: DragScrollProps<TElement, TItemElement>) => DragScrollResult<TElement, TItemElement>;
|
|
309
20
|
|
|
310
21
|
export { useDragScroll };
|
|
@@ -30,14 +30,14 @@ var handleScrollSnap = (dragContainer) => {
|
|
|
30
30
|
};
|
|
31
31
|
|
|
32
32
|
// src/components/ui/drag-scroll/use-drag-scroll.ts
|
|
33
|
-
var useDragScroll = (props
|
|
33
|
+
var useDragScroll = (props) => {
|
|
34
34
|
const {
|
|
35
35
|
classNames,
|
|
36
36
|
extraItemProps,
|
|
37
37
|
extraRootProps,
|
|
38
38
|
orientation = "horizontal",
|
|
39
39
|
usage = "allScreens"
|
|
40
|
-
} = props;
|
|
40
|
+
} = props ?? {};
|
|
41
41
|
const dragContainerRef = useRef(null);
|
|
42
42
|
const positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });
|
|
43
43
|
const handleMouseMove = useCallbackRef((event) => {
|
|
@@ -86,8 +86,8 @@ var useDragScroll = (props = {}) => {
|
|
|
86
86
|
return {
|
|
87
87
|
...mergedRootProps,
|
|
88
88
|
className: cnMerge(
|
|
89
|
-
`flex w-full cursor-grab snap-x snap-mandatory overflow-
|
|
90
|
-
|
|
89
|
+
`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-y-hidden
|
|
90
|
+
overflow-x-scroll`,
|
|
91
91
|
orientation === "horizontal" && "flex-row",
|
|
92
92
|
orientation === "vertical" && "flex-col",
|
|
93
93
|
usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col",
|
|
@@ -97,10 +97,11 @@ var useDragScroll = (props = {}) => {
|
|
|
97
97
|
),
|
|
98
98
|
"data-part": "root",
|
|
99
99
|
"data-scope": "drag-scroll",
|
|
100
|
-
|
|
100
|
+
"data-slot": "drag-scroll-root",
|
|
101
|
+
ref: composeRefs(
|
|
101
102
|
refCallBack,
|
|
102
103
|
mergedRootProps?.ref
|
|
103
|
-
|
|
104
|
+
)
|
|
104
105
|
};
|
|
105
106
|
};
|
|
106
107
|
const getItemProps = (itemProps) => {
|
|
@@ -109,7 +110,8 @@ var useDragScroll = (props = {}) => {
|
|
|
109
110
|
...mergedItemProps,
|
|
110
111
|
className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
|
|
111
112
|
"data-part": "item",
|
|
112
|
-
"data-scope": "drag-scroll"
|
|
113
|
+
"data-scope": "drag-scroll",
|
|
114
|
+
"data-slot": "drag-scroll-item"
|
|
113
115
|
};
|
|
114
116
|
};
|
|
115
117
|
return { getItemProps, getRootProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps<TElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: InferProps<HTMLElement>;\n\textraRootProps?: Omit<InferProps<TElement>, \"children\">;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps<TElement> = {}) => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props;\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = (rootProps?: DragScrollProps<TElement>[\"extraRootProps\"]) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll overflow-y-clip\n\t\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\tref: composeRefs([\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref,\n\t\t\t]),\n\t\t};\n\t};\n\n\tconst getItemProps = <TItemElement extends HTMLElement>(\n\t\titemProps?: DragScrollProps<TItemElement>[\"extraItemProps\"]\n\t) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype ItemProps<TItemElement extends HTMLElement> = InferProps<TItemElement>;\n\ntype RootProps<TElement extends HTMLElement> = InferProps<TElement>;\n\ntype DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: ItemProps<TItemElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\ntype DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tgetItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;\n\tgetRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;\n};\n\nconst useDragScroll = <TElement extends HTMLElement, TItemElement extends HTMLElement>(\n\tprops?: DragScrollProps<TElement, TItemElement>\n): DragScrollResult<TElement, TItemElement> => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"] = (rootProps) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-y-hidden\n\t\t\t\toverflow-x-scroll`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\"data-slot\": \"drag-scroll-root\",\n\t\t\tref: composeRefs(\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref\n\t\t\t),\n\t\t};\n\t};\n\n\tconst getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"] = (itemProps) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\"data-slot\": \"drag-scroll-item\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import { DiscriminatedRenderProps, InferProps, GetSlotComponentProps } from '@zayne-labs/toolkit-react/utils';
|
|
3
3
|
import { FileMeta, FileValidationErrorContext, FileValidationOptions } from '@zayne-labs/toolkit-core';
|
|
4
4
|
import { Prettify } from '@zayne-labs/toolkit-type-helpers';
|
|
@@ -150,9 +150,9 @@ type DropZoneWrapperProps = DropZoneProps & {
|
|
|
150
150
|
*/
|
|
151
151
|
withInternalElements?: boolean;
|
|
152
152
|
};
|
|
153
|
-
declare function DropZoneRoot(props: DropZoneWrapperProps):
|
|
153
|
+
declare function DropZoneRoot(props: DropZoneWrapperProps): React$1.JSX.Element;
|
|
154
154
|
declare const DropZoneImagePreview: {
|
|
155
|
-
(props: Pick<GetSlotComponentProps<string,
|
|
155
|
+
(props: Pick<GetSlotComponentProps<string, React$1.ReactNode>, "children"> & Record<string, unknown>): React$1.ReactNode;
|
|
156
156
|
readonly slotName?: "preview" | undefined;
|
|
157
157
|
readonly slotSymbol?: symbol;
|
|
158
158
|
};
|
|
@@ -3,7 +3,7 @@ import { cnMerge } from '../../chunk-OHG7GB7O.js';
|
|
|
3
3
|
import { __export } from '../../chunk-PZ5AY32C.js';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { isValidElement, Fragment, useRef, useState, useCallback, useMemo } from 'react';
|
|
6
|
-
import { withSlotNameAndSymbol, getSlotMap, mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
|
|
6
|
+
import { withSlotNameAndSymbol, getSlotMap, mergeTwoProps, composeTwoEventHandlers, composeRefs } from '@zayne-labs/toolkit-react/utils';
|
|
7
7
|
import { isArray, isString, isFile, isFunction } from '@zayne-labs/toolkit-type-helpers';
|
|
8
8
|
import { toArray, handleFileValidation, createImagePreview } from '@zayne-labs/toolkit-core';
|
|
9
9
|
import { useCallbackRef } from '@zayne-labs/toolkit-react';
|
|
@@ -133,7 +133,6 @@ var useDropZone = (props) => {
|
|
|
133
133
|
setDropZoneState((prevState) => ({ ...prevState, errors: [] }));
|
|
134
134
|
});
|
|
135
135
|
const handleFileUpload = useCallbackRef((event) => {
|
|
136
|
-
if (event.defaultPrevented) return;
|
|
137
136
|
if (inputRef.current?.disabled) return;
|
|
138
137
|
if (event.type === "drop") {
|
|
139
138
|
event.preventDefault();
|
|
@@ -185,10 +184,10 @@ var useDropZone = (props) => {
|
|
|
185
184
|
// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first
|
|
186
185
|
"data-part": "root",
|
|
187
186
|
"data-slot": "dropzone-root",
|
|
188
|
-
onDragEnter: handleDragEnter,
|
|
189
|
-
onDragLeave: handleDragLeave,
|
|
190
|
-
onDragOver: handleDragOver,
|
|
191
|
-
onDrop: handleFileUpload
|
|
187
|
+
onDragEnter: composeTwoEventHandlers(handleDragEnter, mergedRootProps.onDragEnter),
|
|
188
|
+
onDragLeave: composeTwoEventHandlers(handleDragLeave, mergedRootProps.onDragLeave),
|
|
189
|
+
onDragOver: composeTwoEventHandlers(handleDragOver, mergedRootProps.onDragOver),
|
|
190
|
+
onDrop: composeTwoEventHandlers(handleFileUpload, mergedRootProps.onDrop)
|
|
192
191
|
};
|
|
193
192
|
},
|
|
194
193
|
[
|
|
@@ -219,11 +218,8 @@ var useDropZone = (props) => {
|
|
|
219
218
|
"data-part": "input",
|
|
220
219
|
"data-slot": "dropzone-input",
|
|
221
220
|
multiple: multiple ?? mergedInputProps.multiple,
|
|
222
|
-
onChange: (
|
|
223
|
-
|
|
224
|
-
handleFileUpload(event);
|
|
225
|
-
},
|
|
226
|
-
ref: composeRefs([inputRef, mergedInputProps.ref]),
|
|
221
|
+
onChange: composeTwoEventHandlers(handleFileUpload, mergedInputProps.onChange),
|
|
222
|
+
ref: composeRefs(inputRef, mergedInputProps.ref),
|
|
227
223
|
type: "file"
|
|
228
224
|
};
|
|
229
225
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../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 { 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 DiscriminatedRenderProps,\n\ttype InferProps,\n\tcomposeRefs,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { type Prettify, isFunction, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { clearObjectURL, createObjectURL, generateUniqueId } from \"./utils\";\n\nexport type RootProps = 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 RenderProps = {\n\tdropZoneActions: DropZoneActions;\n\tdropZoneState: DropZoneState;\n\tgetInputProps: (inputProps?: InputProps) => InputProps;\n\tgetRootProps: (rootProps?: RootProps) => RootProps;\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n};\n\nexport type DropZoneResult = RenderProps & { getResolvedChildren: () => React.ReactNode };\n\ntype DropZoneRenderProps = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: RenderProps) => React.ReactNode)\n>;\n\nexport type DropZoneProps = DropZoneRenderProps & {\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<RootProps[\"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 input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Extra props to pass to the root element\n\t */\n\textraRootProps?: RootProps;\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: RenderProps) => 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 validator function to handle file validation\n\t */\n\tvalidator?: FileValidationOptions[\"validator\"];\n};\n\nexport const useDropZone = (props?: DropZoneProps): DropZoneResult => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tchildren,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\tdisallowPreviewForNonImageFiles = true,\n\t\textraInputProps,\n\t\textraRootProps,\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\trender,\n\t\tvalidator,\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: { allowedFileTypes, disallowDuplicates, maxFileCount, maxFileSize },\n\t\t\tvalidator,\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 (event.defaultPrevented) return;\n\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 getRootProps: DropZoneResult[\"getRootProps\"] = useCallback(\n\t\t(rootProps) => {\n\t\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedRootProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\t\tmergedRootProps.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\trootProps?.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\": \"root\",\n\t\t\t\t\"data-slot\": \"dropzone-root\",\n\t\t\t\tonDragEnter: handleDragEnter,\n\t\t\t\tonDragLeave: handleDragLeave,\n\t\t\t\tonDragOver: handleDragOver,\n\t\t\t\tonDrop: handleFileUpload,\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tclassNames?.base,\n\t\t\tclassNames?.isDragging,\n\t\t\textraRootProps,\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: DropZoneResult[\"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\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\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: (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\t\tmergedInputProps.onChange?.(event);\n\t\t\t\t\thandleFileUpload(event);\n\t\t\t\t},\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]\n\t);\n\n\tconst savedOnRenderPropsChange = useCallbackRef(onRenderPropsChange);\n\n\tconst renderProps = 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\tgetInputProps,\n\t\t\tgetRootProps,\n\t\t\tinputRef,\n\t\t} satisfies RenderProps;\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\tgetRootProps,\n\t\thandleDragEnter,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\topenFilePicker,\n\t\tremoveFile,\n\t]);\n\n\tconst selectedChildren = children ?? render;\n\n\tconst getResolvedChildren = () => {\n\t\treturn isFunction(selectedChildren) ? selectedChildren(renderProps) : selectedChildren;\n\t};\n\n\treturn {\n\t\t...renderProps,\n\t\tgetResolvedChildren,\n\t};\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n\ttype GetSlotComponentProps,\n\tgetSlotMap,\n\twithSlotNameAndSymbol,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Fragment as ReactFragment, isValidElement } from \"react\";\nimport { type DropZoneProps, useDropZone } from \"./use-drop-zone\";\n\ntype DropZoneWrapperProps = DropZoneProps & {\n\t/**\n\t * Controls whether to include internal elements (root and input) or not.\n\t */\n\twithInternalElements?: boolean;\n};\n\nexport function DropZoneRoot(props: DropZoneWrapperProps) {\n\tconst { withInternalElements = true, ...restOfProps } = props;\n\n\tconst api = useDropZone(restOfProps);\n\n\tconst RootComponent = withInternalElements ? \"div\" : ReactFragment;\n\tconst InputComponent = withInternalElements ? \"input\" : ReactFragment;\n\n\tconst rootComponentProps = RootComponent === \"div\" && api.getRootProps();\n\tconst inputComponentProps = InputComponent === \"input\" && api.getInputProps();\n\n\tconst resolvedChildren = api.getResolvedChildren();\n\n\t/**\n\t * Whether the children could contain slots.\n\t */\n\tconst couldChildrenContainSlots =\n\t\tisArray(resolvedChildren)\n\t\t|| (isValidElement(resolvedChildren) && resolvedChildren.type === ReactFragment);\n\n\tconst slots = getSlotMap<SlotComponentProps>(resolvedChildren, {\n\t\tcondition: withInternalElements && couldChildrenContainSlots,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<RootComponent {...rootComponentProps}>\n\t\t\t\t<InputComponent {...inputComponentProps} />\n\n\t\t\t\t{slots.default}\n\t\t\t</RootComponent>\n\n\t\t\t{slots.preview}\n\t\t</>\n\t);\n}\n\ntype SlotComponentProps = GetSlotComponentProps<\"preview\">;\n\nexport const DropZoneImagePreview = withSlotNameAndSymbol<SlotComponentProps>(\"preview\");\n","export { DropZoneRoot as Root, DropZoneImagePreview as ImagePreview } from \"./drop-zone\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../../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 { 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 DiscriminatedRenderProps,\n\ttype InferProps,\n\tcomposeRefs,\n\tcomposeTwoEventHandlers,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { type Prettify, isFunction, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { clearObjectURL, createObjectURL, generateUniqueId } from \"./utils\";\n\nexport type RootProps = 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 RenderProps = {\n\tdropZoneActions: DropZoneActions;\n\tdropZoneState: DropZoneState;\n\tgetInputProps: (inputProps?: InputProps) => InputProps;\n\tgetRootProps: (rootProps?: RootProps) => RootProps;\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n};\n\nexport type DropZoneResult = RenderProps & { getResolvedChildren: () => React.ReactNode };\n\ntype DropZoneRenderProps = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: RenderProps) => React.ReactNode)\n>;\n\nexport type DropZoneProps = DropZoneRenderProps & {\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<RootProps[\"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 input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Extra props to pass to the root element\n\t */\n\textraRootProps?: RootProps;\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: RenderProps) => 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 validator function to handle file validation\n\t */\n\tvalidator?: FileValidationOptions[\"validator\"];\n};\n\nexport const useDropZone = (props?: DropZoneProps): DropZoneResult => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tchildren,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\tdisallowPreviewForNonImageFiles = true,\n\t\textraInputProps,\n\t\textraRootProps,\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\trender,\n\t\tvalidator,\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: { allowedFileTypes, disallowDuplicates, maxFileCount, maxFileSize },\n\t\t\tvalidator,\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 getRootProps: DropZoneResult[\"getRootProps\"] = useCallback(\n\t\t(rootProps) => {\n\t\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedRootProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\t\tmergedRootProps.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\trootProps?.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\": \"root\",\n\t\t\t\t\"data-slot\": \"dropzone-root\",\n\t\t\t\tonDragEnter: composeTwoEventHandlers(handleDragEnter, mergedRootProps.onDragEnter),\n\t\t\t\tonDragLeave: composeTwoEventHandlers(handleDragLeave, mergedRootProps.onDragLeave),\n\t\t\t\tonDragOver: composeTwoEventHandlers(handleDragOver, mergedRootProps.onDragOver),\n\t\t\t\tonDrop: composeTwoEventHandlers(handleFileUpload, mergedRootProps.onDrop),\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tclassNames?.base,\n\t\t\tclassNames?.isDragging,\n\t\t\textraRootProps,\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: DropZoneResult[\"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\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\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]\n\t);\n\n\tconst savedOnRenderPropsChange = useCallbackRef(onRenderPropsChange);\n\n\tconst renderProps = 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\tgetInputProps,\n\t\t\tgetRootProps,\n\t\t\tinputRef,\n\t\t} satisfies RenderProps;\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\tgetRootProps,\n\t\thandleDragEnter,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\topenFilePicker,\n\t\tremoveFile,\n\t]);\n\n\tconst selectedChildren = children ?? render;\n\n\tconst getResolvedChildren = () => {\n\t\treturn isFunction(selectedChildren) ? selectedChildren(renderProps) : selectedChildren;\n\t};\n\n\treturn {\n\t\t...renderProps,\n\t\tgetResolvedChildren,\n\t};\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n\ttype GetSlotComponentProps,\n\tgetSlotMap,\n\twithSlotNameAndSymbol,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Fragment as ReactFragment, isValidElement } from \"react\";\nimport { type DropZoneProps, useDropZone } from \"./use-drop-zone\";\n\ntype DropZoneWrapperProps = DropZoneProps & {\n\t/**\n\t * Controls whether to include internal elements (root and input) or not.\n\t */\n\twithInternalElements?: boolean;\n};\n\nexport function DropZoneRoot(props: DropZoneWrapperProps) {\n\tconst { withInternalElements = true, ...restOfProps } = props;\n\n\tconst api = useDropZone(restOfProps);\n\n\tconst RootComponent = withInternalElements ? \"div\" : ReactFragment;\n\tconst InputComponent = withInternalElements ? \"input\" : ReactFragment;\n\n\tconst rootComponentProps = RootComponent === \"div\" && api.getRootProps();\n\tconst inputComponentProps = InputComponent === \"input\" && api.getInputProps();\n\n\tconst resolvedChildren = api.getResolvedChildren();\n\n\t/**\n\t * Whether the children could contain slots.\n\t */\n\tconst couldChildrenContainSlots =\n\t\tisArray(resolvedChildren)\n\t\t|| (isValidElement(resolvedChildren) && resolvedChildren.type === ReactFragment);\n\n\tconst slots = getSlotMap<SlotComponentProps>(resolvedChildren, {\n\t\tcondition: withInternalElements && couldChildrenContainSlots,\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<RootComponent {...rootComponentProps}>\n\t\t\t\t<InputComponent {...inputComponentProps} />\n\n\t\t\t\t{slots.default}\n\t\t\t</RootComponent>\n\n\t\t\t{slots.preview}\n\t\t</>\n\t);\n}\n\ntype SlotComponentProps = GetSlotComponentProps<\"preview\">;\n\nexport const DropZoneImagePreview = withSlotNameAndSymbol<SlotComponentProps>(\"preview\");\n","export { DropZoneRoot as Root, DropZoneImagePreview as ImagePreview } from \"./drop-zone\";\n"]}
|