@salt-ds/lab 1.0.0-alpha.24 → 1.0.0-alpha.25
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/salt-lab.css +22 -65
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +32 -132
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +25 -0
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +52 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
- package/dist-cjs/file-drop-zone/internal/utils.js +4 -13
- package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-cjs/index.js +4 -3
- package/dist-cjs/index.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +36 -136
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneIcon.js +21 -0
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +48 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
- package/dist-es/file-drop-zone/internal/utils.js +5 -12
- package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-es/index.js +2 -1
- package/dist-es/index.js.map +1 -1
- package/dist-types/file-drop-zone/FileDropZone.d.ts +7 -44
- package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts +9 -0
- package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +22 -0
- package/dist-types/file-drop-zone/index.d.ts +2 -1
- package/dist-types/file-drop-zone/internal/utils.d.ts +0 -6
- package/package.json +4 -4
- package/dist-cjs/file-drop-zone/validators.js +0 -38
- package/dist-cjs/file-drop-zone/validators.js.map +0 -1
- package/dist-es/file-drop-zone/validators.js +0 -29
- package/dist-es/file-drop-zone/validators.js.map +0 -1
- package/dist-types/file-drop-zone/validators.d.ts +0 -21
package/css/salt-lab.css
CHANGED
|
@@ -1252,82 +1252,39 @@
|
|
|
1252
1252
|
|
|
1253
1253
|
/* src/file-drop-zone/FileDropZone.css */
|
|
1254
1254
|
.saltFileDropZone {
|
|
1255
|
-
--
|
|
1256
|
-
--fileDropZone-borderColor: var(--salt-container-secondary-borderColor);
|
|
1257
|
-
--fileDropZone-borderWidth: var(--salt-size-border);
|
|
1258
|
-
--fileDropZone-borderStyle: var(--salt-target-borderStyle);
|
|
1259
|
-
--fileDropZone-text-color: var(--salt-content-primary-foreground);
|
|
1260
|
-
--fileDropZone-icon-color: var(--salt-content-primary-foreground);
|
|
1261
|
-
--fileDropZone-padding: var(--salt-size-container-spacing);
|
|
1262
|
-
--fileDropZone-title-fontSize: var(--salt-text-fontSize);
|
|
1263
|
-
--fileDropZone-title-lineHeight: var(--salt-text-lineHeight);
|
|
1264
|
-
}
|
|
1265
|
-
.saltFileDropZone {
|
|
1266
|
-
color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));
|
|
1255
|
+
color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
|
|
1267
1256
|
display: inline-flex;
|
|
1268
|
-
background: var(--saltFileDropZone-background, var(--
|
|
1257
|
+
background: var(--saltFileDropZone-background, var(--salt-container-primary-background));
|
|
1269
1258
|
text-align: center;
|
|
1270
|
-
align-items:
|
|
1259
|
+
align-items: center;
|
|
1271
1260
|
justify-content: center;
|
|
1272
|
-
border
|
|
1273
|
-
border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));
|
|
1274
|
-
border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));
|
|
1261
|
+
border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
|
|
1275
1262
|
flex-direction: column;
|
|
1276
|
-
padding: var(--
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
fill: var(--fileDropZone-icon-color);
|
|
1283
|
-
margin-bottom: var(--salt-size-unit);
|
|
1284
|
-
}
|
|
1285
|
-
.saltFileDropZone .saltFileDropZone-title:not(:last-child),
|
|
1286
|
-
.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {
|
|
1287
|
-
margin-bottom: calc(var(--salt-size-unit) * 2);
|
|
1288
|
-
}
|
|
1289
|
-
.saltFileDropZone-active:not(.saltFileDropZone-disabled) {
|
|
1290
|
-
--fileDropZone-background: var(--salt-target-background-hover);
|
|
1263
|
+
padding: var(--salt-spacing-200);
|
|
1264
|
+
gap: var(--salt-spacing-200);
|
|
1265
|
+
width: 100%;
|
|
1266
|
+
font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
|
|
1267
|
+
font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
|
|
1268
|
+
line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
|
|
1291
1269
|
}
|
|
1292
|
-
.saltFileDropZone-
|
|
1293
|
-
|
|
1270
|
+
.saltFileDropZone-active {
|
|
1271
|
+
background: var(--salt-target-background-hover);
|
|
1272
|
+
border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
|
|
1294
1273
|
}
|
|
1295
1274
|
.saltFileDropZone-error {
|
|
1296
|
-
--
|
|
1297
|
-
--fileDropZone-borderColor: var(--salt-status-error-borderColor);
|
|
1298
|
-
--fileDropZone-icon-color: var(--salt-status-error-foreground);
|
|
1275
|
+
border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
|
|
1299
1276
|
}
|
|
1300
|
-
.saltFileDropZone-
|
|
1301
|
-
--
|
|
1302
|
-
--fileDropZone-borderColor: var(--salt-container-secondary-borderColor);
|
|
1277
|
+
.saltFileDropZone-success {
|
|
1278
|
+
border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
|
|
1303
1279
|
}
|
|
1304
|
-
.saltFileDropZone-
|
|
1305
|
-
|
|
1306
|
-
font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));
|
|
1307
|
-
line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));
|
|
1308
|
-
}
|
|
1309
|
-
.saltFileDropZone-title {
|
|
1310
|
-
font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));
|
|
1311
|
-
}
|
|
1312
|
-
.saltFileDropZone-inputButton {
|
|
1313
|
-
display: inline-flex;
|
|
1314
|
-
}
|
|
1315
|
-
.saltFileDropZone-inputRoot {
|
|
1316
|
-
line-height: 1;
|
|
1317
|
-
}
|
|
1318
|
-
.saltFileDropZone-inputRoot .input-hidden {
|
|
1319
|
-
position: absolute;
|
|
1320
|
-
clip: rect(0, 0, 0, 0);
|
|
1321
|
-
visibility: hidden;
|
|
1280
|
+
.saltFileDropZone .input-hidden {
|
|
1281
|
+
display: none;
|
|
1322
1282
|
}
|
|
1323
1283
|
.saltFileDropZone-disabled {
|
|
1324
|
-
|
|
1284
|
+
background: var(--salt-container-primary-background-disabled);
|
|
1285
|
+
border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
|
|
1325
1286
|
cursor: var(--salt-target-cursor-disabled);
|
|
1326
|
-
|
|
1327
|
-
.saltFileDropZone-disabled .saltFileDropZone-icon,
|
|
1328
|
-
.saltFileDropZone-disabled .saltFileDropZone-title {
|
|
1329
|
-
--fileDropZone-text-color: var(--salt-content-primary-foreground-disabled);
|
|
1330
|
-
--fileDropZone-icon-color: var(--salt-content-primary-foreground-disabled);
|
|
1287
|
+
color: var(--salt-content-primary-foreground-disabled);
|
|
1331
1288
|
}
|
|
1332
1289
|
|
|
1333
1290
|
/* src/form-field-legacy/FormActivationIndicator.css */
|
|
@@ -4842,4 +4799,4 @@
|
|
|
4842
4799
|
margin: calc(var(--salt-size-unit) / 2) 0;
|
|
4843
4800
|
}
|
|
4844
4801
|
|
|
4845
|
-
/* src/
|
|
4802
|
+
/* src/e83e7a87-9b39-4c85-a332-f94347392d34.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "
|
|
3
|
+
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var core = require('@salt-ds/core');
|
|
7
|
-
var icons = require('@salt-ds/icons');
|
|
8
7
|
var clsx = require('clsx');
|
|
9
8
|
var React = require('react');
|
|
10
9
|
var utils = require('./internal/utils.js');
|
|
@@ -12,20 +11,16 @@ var window = require('@salt-ds/window');
|
|
|
12
11
|
var styles = require('@salt-ds/styles');
|
|
13
12
|
var FileDropZone$1 = require('./FileDropZone.css.js');
|
|
14
13
|
|
|
15
|
-
const buttonLabel = "Browse files";
|
|
16
|
-
const INVALID_DROP_TARGET = "Drop target doesn't contain any file.";
|
|
17
14
|
const withBaseName = core.makePrefixer("saltFileDropZone");
|
|
18
15
|
const FileDropZone = React.forwardRef(
|
|
19
16
|
function FileDropZone2({
|
|
20
|
-
|
|
17
|
+
status,
|
|
21
18
|
className,
|
|
22
19
|
children,
|
|
23
|
-
description,
|
|
24
20
|
disabled,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
onFilesRejected,
|
|
21
|
+
onDragOver,
|
|
22
|
+
onDragLeave,
|
|
23
|
+
onDrop,
|
|
29
24
|
...restProps
|
|
30
25
|
}, ref) {
|
|
31
26
|
const targetWindow = window.useWindow();
|
|
@@ -34,158 +29,63 @@ const FileDropZone = React.forwardRef(
|
|
|
34
29
|
css: FileDropZone$1,
|
|
35
30
|
window: targetWindow
|
|
36
31
|
});
|
|
37
|
-
const id = core.useId(idProp);
|
|
38
|
-
const iconId = `${id}-icon`;
|
|
39
|
-
const buttonId = `${id}-button`;
|
|
40
|
-
const descriptionId = `${id}-description`;
|
|
41
|
-
const [dropResult, setDropResult] = React.useState(null);
|
|
42
32
|
const [isActive, setActive] = React.useState(false);
|
|
43
|
-
const
|
|
44
|
-
const
|
|
45
|
-
const fileInputRef = React.useRef(null);
|
|
46
|
-
React.useEffect(() => {
|
|
47
|
-
if (!disabled && dropResult) {
|
|
48
|
-
const { event, files, errors } = dropResult;
|
|
49
|
-
if (errors && errors.length !== 0) {
|
|
50
|
-
setRejected(true);
|
|
51
|
-
if (!!onFilesRejected) {
|
|
52
|
-
return onFilesRejected(errors, event);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
setRejected(false);
|
|
56
|
-
return onFilesAccepted == null ? void 0 : onFilesAccepted(files, event);
|
|
57
|
-
}
|
|
58
|
-
}, [disabled, dropResult, onFilesAccepted, onFilesRejected]);
|
|
33
|
+
const regionRef = React.useRef(null);
|
|
34
|
+
const handleRef = core.useForkRef(ref, regionRef);
|
|
59
35
|
const handleDragOver = (event) => {
|
|
60
36
|
event.preventDefault();
|
|
61
37
|
event.stopPropagation();
|
|
62
38
|
if (disabled) {
|
|
63
|
-
|
|
39
|
+
if (event.dataTransfer) {
|
|
40
|
+
event.dataTransfer.dropEffect = "none";
|
|
41
|
+
}
|
|
64
42
|
return;
|
|
65
|
-
}
|
|
66
|
-
|
|
43
|
+
}
|
|
44
|
+
if (event.dataTransfer) {
|
|
45
|
+
event.dataTransfer.dropEffect = "copy";
|
|
67
46
|
}
|
|
68
47
|
if (!isActive && utils.containsFiles(event)) {
|
|
69
48
|
setActive(true);
|
|
70
49
|
}
|
|
50
|
+
onDragOver == null ? void 0 : onDragOver(event);
|
|
71
51
|
};
|
|
72
|
-
const handleDragLeave = () =>
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return setDropResult({
|
|
76
|
-
event,
|
|
77
|
-
errors: [INVALID_DROP_TARGET]
|
|
78
|
-
});
|
|
52
|
+
const handleDragLeave = (event) => {
|
|
53
|
+
if (disabled) {
|
|
54
|
+
return;
|
|
79
55
|
}
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
files,
|
|
85
|
-
errors: validate ? utils.validateFiles({ files, validate }) : []
|
|
86
|
-
});
|
|
56
|
+
const region = regionRef == null ? void 0 : regionRef.current;
|
|
57
|
+
const eventTarget = event.relatedTarget;
|
|
58
|
+
if (eventTarget !== region && !(region == null ? void 0 : region.contains(eventTarget))) {
|
|
59
|
+
setActive(false);
|
|
87
60
|
}
|
|
61
|
+
onDragLeave == null ? void 0 : onDragLeave(event);
|
|
88
62
|
};
|
|
89
63
|
const handleDrop = (event) => {
|
|
64
|
+
if (disabled) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
90
67
|
event.preventDefault();
|
|
91
|
-
|
|
92
|
-
handleFilesDrop(event);
|
|
68
|
+
const files = utils.extractFiles(event);
|
|
93
69
|
setActive(false);
|
|
70
|
+
onDrop == null ? void 0 : onDrop(event, files);
|
|
94
71
|
};
|
|
95
|
-
|
|
96
|
-
event.stopPropagation();
|
|
97
|
-
handleFilesDrop(event);
|
|
98
|
-
};
|
|
99
|
-
const handleInputFocus = React.useCallback(
|
|
100
|
-
(event) => {
|
|
101
|
-
event.stopPropagation();
|
|
102
|
-
buttonRef.current && buttonRef.current.focus();
|
|
103
|
-
},
|
|
104
|
-
[]
|
|
105
|
-
);
|
|
106
|
-
const handleInputClick = React.useCallback(
|
|
107
|
-
(event) => {
|
|
108
|
-
event.stopPropagation();
|
|
109
|
-
fileInputRef.current && fileInputRef.current.click();
|
|
110
|
-
},
|
|
111
|
-
[]
|
|
112
|
-
);
|
|
113
|
-
const handleKeyDown = React.useCallback(
|
|
114
|
-
(event) => {
|
|
115
|
-
if (["Enter", "Space"].indexOf(event.key) !== -1) {
|
|
116
|
-
fileInputRef.current && fileInputRef.current.click();
|
|
117
|
-
}
|
|
118
|
-
},
|
|
119
|
-
[]
|
|
120
|
-
);
|
|
121
|
-
const fileDropZoneDescription = description ? /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
122
|
-
className: "saltFileDropZone-description",
|
|
123
|
-
id: descriptionId,
|
|
124
|
-
children: description
|
|
125
|
-
}) : null;
|
|
126
|
-
const buttonLabelledBy = (isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]).join(" ");
|
|
127
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
128
|
-
...restProps,
|
|
72
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
129
73
|
className: clsx.clsx(
|
|
130
74
|
withBaseName(),
|
|
131
75
|
{
|
|
132
|
-
[withBaseName(
|
|
76
|
+
[withBaseName(status)]: status,
|
|
133
77
|
[withBaseName("active")]: isActive,
|
|
134
78
|
[withBaseName("disabled")]: disabled
|
|
135
79
|
},
|
|
136
80
|
className
|
|
137
81
|
),
|
|
82
|
+
"aria-disabled": disabled,
|
|
138
83
|
onDragLeave: handleDragLeave,
|
|
139
84
|
onDragOver: handleDragOver,
|
|
140
85
|
onDrop: handleDrop,
|
|
141
|
-
ref,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
"aria-live": "polite",
|
|
145
|
-
children: [
|
|
146
|
-
isRejected ? /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorIcon, {
|
|
147
|
-
"aria-label": "error!",
|
|
148
|
-
className: withBaseName("icon"),
|
|
149
|
-
size: 2
|
|
150
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(icons.UploadIcon, {
|
|
151
|
-
className: withBaseName("icon"),
|
|
152
|
-
size: 2
|
|
153
|
-
}),
|
|
154
|
-
isRejected && fileDropZoneDescription
|
|
155
|
-
]
|
|
156
|
-
}),
|
|
157
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
158
|
-
className: withBaseName("title"),
|
|
159
|
-
children: children || "Drop files here or"
|
|
160
|
-
}),
|
|
161
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", {
|
|
162
|
-
className: withBaseName("inputRoot"),
|
|
163
|
-
children: [
|
|
164
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
165
|
-
"aria-labelledby": buttonLabelledBy,
|
|
166
|
-
ref: buttonRef,
|
|
167
|
-
className: withBaseName("inputButton"),
|
|
168
|
-
"data-testid": "file-input-button",
|
|
169
|
-
disabled,
|
|
170
|
-
onKeyDown: handleKeyDown,
|
|
171
|
-
onClick: handleInputClick,
|
|
172
|
-
children: buttonLabel.toUpperCase()
|
|
173
|
-
}),
|
|
174
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
175
|
-
accept,
|
|
176
|
-
className: "input-hidden",
|
|
177
|
-
"data-testid": "file-input",
|
|
178
|
-
disabled,
|
|
179
|
-
multiple: true,
|
|
180
|
-
onChange: handleInputChange,
|
|
181
|
-
onFocus: handleInputFocus,
|
|
182
|
-
ref: fileInputRef,
|
|
183
|
-
type: "file"
|
|
184
|
-
})
|
|
185
|
-
]
|
|
186
|
-
}),
|
|
187
|
-
!isRejected && fileDropZoneDescription
|
|
188
|
-
]
|
|
86
|
+
ref: handleRef,
|
|
87
|
+
...restProps,
|
|
88
|
+
children
|
|
189
89
|
});
|
|
190
90
|
}
|
|
191
91
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n DragEvent,\n DragEventHandler,\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactNode,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n files: ReadonlyArray<File>,\n event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n errors: ReadonlyArray<ErrorType>,\n event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n\n /**\n * The text content of the drop area component.\n */\n children?: ReactNode;\n\n /**\n * Additional usage information.\n */\n description?: string;\n\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n\n /**\n * This prop is used to help implement the accessibility logic.\n * If you don't provide this prop. It falls back to a randomly generated id.\n */\n id?: string;\n\n /**\n * Callback on successful file drop or selection.\n */\n onFilesAccepted?: FilesAcceptedEventHandler;\n\n /**\n * @see `validate` prop\n * Callback on drop or input in case of an error. A list of errors will be provided as input.\n */\n onFilesRejected?: FilesRejectedEventHandler;\n\n /**\n * A list of custom validation functions. Every function is provided with the entire file list as input\n * thus can perform validations on all files. Each function needs to return one or more errors in case of\n * a failed validation, or `undefined` in case of a successful one.\n *\n * All errors are collected in the end and returned as an array to `onFilesRejected`.\n */\n validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n accept,\n className,\n children,\n description,\n disabled,\n id: idProp,\n validate,\n onFilesAccepted,\n onFilesRejected,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const iconId = `${id}-icon`;\n const buttonId = `${id}-button`;\n const descriptionId = `${id}-description`;\n\n const [dropResult, setDropResult] = useState<null | {\n event: SyntheticEvent;\n files?: ReadonlyArray<File>;\n errors: string[];\n }>(null);\n const [isActive, setActive] = useState(false);\n const [isRejected, setRejected] = useState(false);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!disabled && dropResult) {\n const { event, files, errors } = dropResult;\n\n if (errors && errors.length !== 0) {\n setRejected(true);\n if (!!onFilesRejected) {\n return onFilesRejected(errors, event);\n }\n }\n\n setRejected(false);\n return onFilesAccepted?.(files!, event);\n }\n }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n return;\n } else {\n // Not using 'move', otherwise apps like Outlook will delete the item\n event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n }\n\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n };\n\n const handleDragLeave = () => setActive(false);\n\n const handleFilesDrop = (event: SyntheticEvent) => {\n if (!containsFiles(event as DragEvent)) {\n return setDropResult({\n event,\n errors: [INVALID_DROP_TARGET],\n });\n }\n\n const files = extractFiles(event as DragEvent);\n\n if (files.length > 0) {\n return setDropResult({\n event,\n files,\n errors: validate ? validateFiles({ files, validate }) : [],\n });\n }\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleFilesDrop(event);\n setActive(false);\n };\n\n const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n event.stopPropagation();\n\n handleFilesDrop(event);\n };\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current && buttonRef.current.focus();\n },\n []\n );\n\n const handleInputClick = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current && fileInputRef.current.click();\n },\n []\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n fileInputRef.current && fileInputRef.current.click();\n }\n },\n []\n );\n\n const fileDropZoneDescription = description ? (\n <div className=\"saltFileDropZone-description\" id={descriptionId}>\n {description}\n </div>\n ) : null;\n\n const buttonLabelledBy = (\n isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n ).join(\" \");\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"error\")]: isRejected,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={ref}\n >\n {/* TODO: Check whether we want to replace this with aria announce */}\n <div aria-live=\"polite\">\n {/*\n * It is an ADA requirement to always display an input button.-\n */}\n {isRejected ? (\n <ErrorIcon\n aria-label=\"error!\"\n className={withBaseName(\"icon\")}\n size={2}\n />\n ) : (\n <UploadIcon className={withBaseName(\"icon\")} size={2} />\n )}\n {isRejected && fileDropZoneDescription}\n </div>\n <div className={withBaseName(\"title\")}>\n {children || \"Drop files here or\"}\n </div>\n <label className={withBaseName(\"inputRoot\")}>\n <Button\n aria-labelledby={buttonLabelledBy}\n ref={buttonRef}\n className={withBaseName(\"inputButton\")}\n data-testid=\"file-input-button\"\n disabled={disabled}\n onKeyDown={handleKeyDown}\n onClick={handleInputClick}\n >\n {/* TODO: expose this in props */}\n {buttonLabel.toUpperCase()}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n data-testid=\"file-input\"\n disabled={disabled}\n multiple\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </label>\n {!isRejected && fileDropZoneDescription}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useWindow","useComponentCssInjection","fileDropZoneCss","useId","useState","useRef","useEffect","containsFiles","extractFiles","validateFiles","useCallback","jsx","jsxs","clsx","ErrorIcon","UploadIcon","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useWindow","useComponentCssInjection","fileDropZoneCss","useState","useRef","useForkRef","containsFiles","extractFiles","jsx","clsx"],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var core = require('@salt-ds/core');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var icons = require('@salt-ds/icons');
|
|
9
|
+
|
|
10
|
+
const FileDropZoneIcon = React.forwardRef(function FileDropZoneIcon2({ status, size = 2, ...rest }, ref) {
|
|
11
|
+
const iconProps = {
|
|
12
|
+
ref,
|
|
13
|
+
size,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
return status ? /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
|
|
17
|
+
status,
|
|
18
|
+
...iconProps
|
|
19
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx(icons.UploadIcon, {
|
|
20
|
+
...iconProps
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
exports.FileDropZoneIcon = FileDropZoneIcon;
|
|
25
|
+
//# sourceMappingURL=FileDropZoneIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport { IconProps, UploadIcon } from \"@salt-ds/icons\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["forwardRef","FileDropZoneIcon","jsx","StatusIndicator","UploadIcon"],"mappings":";;;;;;;;;AAWa,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBAAiB,CAAA,EAAE,QAAQ,IAAO,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AAC9D,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACA,EAAA,OAAO,yBACJC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,oBAE/CD,cAAA,CAAAE,gBAAA,EAAA;AAAA,IAAY,GAAG,SAAA;AAAA,GAAW,CAAA,CAAA;AAE/B,CAAC;;;;"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var core = require('@salt-ds/core');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
|
|
9
|
+
const FileDropZoneTrigger = React.forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
|
|
10
|
+
const buttonRef = React.useRef(null);
|
|
11
|
+
const fileInputRef = React.useRef(null);
|
|
12
|
+
const triggerRef = core.useForkRef(ref, buttonRef);
|
|
13
|
+
const handleFocus = (event) => {
|
|
14
|
+
var _a;
|
|
15
|
+
event.stopPropagation();
|
|
16
|
+
(_a = buttonRef.current) == null ? void 0 : _a.focus();
|
|
17
|
+
};
|
|
18
|
+
const handleClick = (event) => {
|
|
19
|
+
var _a;
|
|
20
|
+
event.stopPropagation();
|
|
21
|
+
(_a = fileInputRef.current) == null ? void 0 : _a.click();
|
|
22
|
+
};
|
|
23
|
+
const handleChange = (event) => {
|
|
24
|
+
var _a;
|
|
25
|
+
const files = Array.from((_a = event.target.files) != null ? _a : []);
|
|
26
|
+
onChange == null ? void 0 : onChange(event, files);
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
31
|
+
onClick: handleClick,
|
|
32
|
+
disabled,
|
|
33
|
+
ref: triggerRef,
|
|
34
|
+
...rest,
|
|
35
|
+
children: children != null ? children : "Browse files"
|
|
36
|
+
}),
|
|
37
|
+
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
38
|
+
accept,
|
|
39
|
+
className: "input-hidden",
|
|
40
|
+
disabled,
|
|
41
|
+
multiple,
|
|
42
|
+
onChange: handleChange,
|
|
43
|
+
onFocus: handleFocus,
|
|
44
|
+
ref: fileInputRef,
|
|
45
|
+
type: "file"
|
|
46
|
+
})
|
|
47
|
+
]
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
exports.FileDropZoneTrigger = FileDropZoneTrigger;
|
|
52
|
+
//# sourceMappingURL=FileDropZoneTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import { Button, useForkRef } from \"@salt-ds/core\";\nimport {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["forwardRef","FileDropZoneTrigger","useRef","useForkRef","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;AA+BO,MAAM,mBAAsB,GAAAA,gBAAA,CAGjC,SAASC,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAeA,aAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAaC,eAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA5C/D,IAAA,IAAA,EAAA,CAAA;AA6CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAjDpE,IAAA,IAAA,EAAA,CAAA;AAkDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAtDpE,IAAA,IAAA,EAAA,CAAA;AAuDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACCD,cAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const toArray = (obj) => Object.keys(obj).map((key) => obj[key]);
|
|
6
5
|
const containsFiles = (e) => {
|
|
7
6
|
if (!e.dataTransfer) {
|
|
8
7
|
const target = e.target;
|
|
9
|
-
return target
|
|
8
|
+
return target == null ? void 0 : target.files;
|
|
10
9
|
}
|
|
11
10
|
return Array.prototype.some.call(
|
|
12
11
|
e.dataTransfer.types,
|
|
@@ -14,26 +13,18 @@ const containsFiles = (e) => {
|
|
|
14
13
|
);
|
|
15
14
|
};
|
|
16
15
|
const extractFiles = (e) => {
|
|
16
|
+
var _a;
|
|
17
17
|
if (containsFiles(e)) {
|
|
18
18
|
if (e.dataTransfer) {
|
|
19
|
-
return
|
|
19
|
+
return Array.from(e.dataTransfer.files);
|
|
20
20
|
}
|
|
21
21
|
if (e.target) {
|
|
22
|
-
return
|
|
22
|
+
return Array.from((_a = e.target.files) != null ? _a : []);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
return [];
|
|
26
26
|
};
|
|
27
|
-
const validateFiles = ({
|
|
28
|
-
files = [],
|
|
29
|
-
validate = []
|
|
30
|
-
}) => validate.reduce(
|
|
31
|
-
(result, validator) => result.concat(validator(files)),
|
|
32
|
-
[]
|
|
33
|
-
).filter(Boolean);
|
|
34
27
|
|
|
35
28
|
exports.containsFiles = containsFiles;
|
|
36
29
|
exports.extractFiles = extractFiles;
|
|
37
|
-
exports.toArray = toArray;
|
|
38
|
-
exports.validateFiles = validateFiles;
|
|
39
30
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\"\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":";;;;AAEa,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AAdtD,EAAA,IAAA,EAAA,CAAA;AAeE,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAK,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACxC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAA,OAAO,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,OAA4B,KAA9B,KAAA,IAAA,GAAA,EAAA,GAAuC,EAAE,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV;;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -76,7 +76,8 @@ var useDropdownBase = require('./dropdown/useDropdownBase.js');
|
|
|
76
76
|
var DropdownNext = require('./dropdown-next/DropdownNext.js');
|
|
77
77
|
var EditableLabel = require('./editable-label/EditableLabel.js');
|
|
78
78
|
var FileDropZone = require('./file-drop-zone/FileDropZone.js');
|
|
79
|
-
var
|
|
79
|
+
var FileDropZoneIcon = require('./file-drop-zone/FileDropZoneIcon.js');
|
|
80
|
+
var FileDropZoneTrigger = require('./file-drop-zone/FileDropZoneTrigger.js');
|
|
80
81
|
var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
|
|
81
82
|
var FormLabel = require('./form-field-legacy/FormLabel.js');
|
|
82
83
|
var FormFieldLegacyContext = require('./form-field-context-legacy/FormFieldLegacyContext.js');
|
|
@@ -239,8 +240,8 @@ exports.useDropdownBase = useDropdownBase.useDropdownBase;
|
|
|
239
240
|
exports.DropdownNext = DropdownNext.DropdownNext;
|
|
240
241
|
exports.EditableLabel = EditableLabel.EditableLabel;
|
|
241
242
|
exports.FileDropZone = FileDropZone.FileDropZone;
|
|
242
|
-
exports.
|
|
243
|
-
exports.
|
|
243
|
+
exports.FileDropZoneIcon = FileDropZoneIcon.FileDropZoneIcon;
|
|
244
|
+
exports.FileDropZoneTrigger = FileDropZoneTrigger.FileDropZoneTrigger;
|
|
244
245
|
exports.FormField = FormFieldLegacy.FormFieldLegacy;
|
|
245
246
|
exports.FormLabel = FormLabel.FormLabel;
|
|
246
247
|
exports.FormFieldLegacyContext = FormFieldLegacyContext.FormFieldLegacyContext;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "
|
|
1
|
+
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=FileDropZone.css.js.map
|