@tedi-design-system/react 18.1.1-rc.2 → 18.2.0-rc.2
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/bundle-stats.html +1 -1
- package/package.json +1 -1
- package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js +1 -1
- package/src/tedi/components/form/file-dropzone/file-dropzone.d.ts +14 -1
- package/src/tedi/components/form/file-dropzone/file-dropzone.es.js +120 -82
- package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js +1 -1
- package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js +1 -0
- package/src/tedi/components/form/file-upload/file-upload.cjs.js +1 -1
- package/src/tedi/components/form/file-upload/file-upload.d.ts +8 -1
- package/src/tedi/components/form/file-upload/file-upload.es.js +52 -50
- package/src/tedi/helpers/hooks/use-file-upload.cjs.js +1 -1
- package/src/tedi/helpers/hooks/use-file-upload.d.ts +9 -1
- package/src/tedi/helpers/hooks/use-file-upload.es.js +77 -79
- package/tedi.cjs.js +1 -1
- package/tedi.es.js +307 -306
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),W=require("react"),E=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),G=require("../../../helpers/hooks/use-file-upload.cjs.js"),J=require("../../base/icon/icon.cjs.js"),K=require("../../buttons/button/button.cjs.js"),Q=require("../../misc/attachment/attachment.cjs.js"),X=require("../feedback-text/feedback-text.cjs.js"),Y=require("../form-label/form-label.cjs.js"),n=require("./file-dropzone.module.scss.cjs.js"),Z=require("../../../providers/label-provider/use-labels.cjs.js"),y=require("../../content/list/list.cjs.js"),F=d=>{if(!d)return;const a=d.split(",").reduce((s,u)=>{const i=u.trim();return i&&(i.startsWith(".")?(s["*/*"]=s["*/*"]??[],s["*/*"].push(i)):s[i]=s[i]??[]),s},{});return Object.keys(a).length?a:void 0},_=d=>{const{getLabel:a}=Z.useLabels(),{label:s=a("file-dropzone.label"),className:u,disabled:i=!1,helper:q,id:D,name:N,attachmentProps:p,accept:v,maxSize:m,multiple:b,validateIndividually:L,defaultFiles:I,files:$,onChange:A,onDelete:R,announcementTimeout:T,...P}=d,{innerFiles:x,uploadErrorHelper:r,onFileChange:S,onFileRemove:V,announcement:C}=G.useFileUpload({accept:v,maxSize:m,multiple:b,validateIndividually:L,defaultFiles:I,files:$,onChange:A,onDelete:R,announcementTimeout:T}),M=W.useId(),f=D??M,{getRootProps:O,getInputProps:B,isDragActive:U}=E.useDropzone({disabled:i,accept:F(v),multiple:b,maxSize:m?m*1024**2:void 0,onDrop:(t,l=[])=>{if(i)return;const z=l.filter(h=>h.errors.some(j=>j.code==="file-too-large"||j.code==="file-invalid-type")).map(h=>h.file),c=[...t,...z];if(c.length===0)return;S({target:{files:c}})}}),o=(r==null?void 0:r.type)==="error"?r:q??r,g=o?o.id??`${f}-helper`:void 0,k=w.default(n.default["tedi-file-dropzone"],{[n.default["tedi-file-dropzone--disabled"]]:i},{[n.default["tedi-file-dropzone--invalid"]]:(o==null?void 0:o.type)==="error"},{[n.default["tedi-file-dropzone--valid"]]:(o==null?void 0:o.type)==="valid"},{[n.default["tedi-file-dropzone--drop-over"]]:U},u);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...O({role:"button",tabIndex:i?-1:0,"aria-disabled":i,"aria-describedby":g}),className:k,children:[e.jsx("input",{...B(),id:f,name:N,className:n.default["tedi-file-dropzone__input"],disabled:i}),e.jsx("div",{className:n.default["tedi-file-dropzone__label-wrapper"],children:e.jsx(Y.FormLabel,{...P,id:f,label:e.jsxs(e.Fragment,{children:[e.jsx(J.Icon,{color:i?"tertiary":"secondary",size:24,name:"attach_file",display:"inline",className:n.default["tedi-file-dropzone__label-icon"]}),s]}),className:n.default["tedi-file-dropzone__label"]})})]}),o&&e.jsx(X.FeedbackText,{...o,id:g}),!!x.length&&e.jsx(y.List,{className:n.default["tedi-file-dropzone__file-list"],style:"none","aria-label":a("file-dropzone.selected-files"),children:x.map(t=>{const l=typeof p=="function"?p(t):p,{actions:z,...c}=l??{};return e.jsxs(y.List.Item,{className:n.default["tedi-file-dropzone__file-list-item"],children:[e.jsx(Q.Attachment,{...c,name:t.name??"",isValid:t.isValid??(l==null?void 0:l.isValid),isLoading:t.isLoading??(l==null?void 0:l.isLoading),actions:e.jsxs(e.Fragment,{children:[z,e.jsx(K.Button,{visualType:"neutral",icon:"delete",onClick:()=>V(t),children:`${a("remove")} ${t.name??""}`})]})}),t.isValid===!1&&e.jsx("span",{className:"sr-only",children:`${a("file-dropzone.failed")} ${t.name??""}`})]},t.id??`${t.name??"file"}-${t.size??""}-${t.lastModified??""}`)})}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:C})]})};_.displayName="FileDropzone";exports.FileDropzone=_;exports.toDropzoneAccept=F;
|
|
@@ -34,5 +34,18 @@ export interface FileDropzoneProps extends Omit<FormLabelProps, 'size' | 'hideLa
|
|
|
34
34
|
*/
|
|
35
35
|
attachmentProps?: FileDropzoneAttachmentProps;
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
/**
|
|
38
|
+
* Maps a comma-separated `accept` string to react-dropzone's accept-object shape
|
|
39
|
+
* (`{ [mime]: string[] }`) so the rendered input's `accept` attribute matches the
|
|
40
|
+
* prop exactly. Extensions are grouped under a wildcard key that react-dropzone
|
|
41
|
+
* drops from the attribute (it is not a valid MIME type) so only the extensions
|
|
42
|
+
* surface, while explicit MIME types stay as their own keys. Avoids the old
|
|
43
|
+
* hardcoded key that leaked the whole `application` wildcard family into the
|
|
44
|
+
* native picker and drag validation (#783).
|
|
45
|
+
*/
|
|
46
|
+
export declare const toDropzoneAccept: (accept?: string) => Record<string, string[]> | undefined;
|
|
47
|
+
export declare const FileDropzone: {
|
|
48
|
+
(props: FileDropzoneProps): JSX.Element;
|
|
49
|
+
displayName: string;
|
|
50
|
+
};
|
|
38
51
|
export default FileDropzone;
|
|
@@ -1,115 +1,151 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { useDropzone as
|
|
5
|
-
import { useFileUpload as
|
|
6
|
-
import { Icon as
|
|
7
|
-
import { Button as
|
|
8
|
-
import { Attachment as
|
|
9
|
-
import { FeedbackText as
|
|
10
|
-
import { FormLabel as
|
|
11
|
-
import
|
|
12
|
-
import { useLabels as
|
|
13
|
-
import { List as
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
1
|
+
import { jsxs as d, Fragment as b, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import k from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import q from "react";
|
|
4
|
+
import { useDropzone as E } from "../../../../../external/react-dropzone/dist/es/index.es.js";
|
|
5
|
+
import { useFileUpload as G } from "../../../helpers/hooks/use-file-upload.es.js";
|
|
6
|
+
import { Icon as J } from "../../base/icon/icon.es.js";
|
|
7
|
+
import { Button as K } from "../../buttons/button/button.es.js";
|
|
8
|
+
import { Attachment as Q } from "../../misc/attachment/attachment.es.js";
|
|
9
|
+
import { FeedbackText as X } from "../feedback-text/feedback-text.es.js";
|
|
10
|
+
import { FormLabel as Y } from "../form-label/form-label.es.js";
|
|
11
|
+
import o from "./file-dropzone.module.scss.es.js";
|
|
12
|
+
import { useLabels as Z } from "../../../providers/label-provider/use-labels.es.js";
|
|
13
|
+
import { List as I } from "../../content/list/list.es.js";
|
|
14
|
+
const H = (m) => {
|
|
15
|
+
if (!m) return;
|
|
16
|
+
const a = m.split(",").reduce((l, c) => {
|
|
17
|
+
const i = c.trim();
|
|
18
|
+
return i && (i.startsWith(".") ? (l["*/*"] = l["*/*"] ?? [], l["*/*"].push(i)) : l[i] = l[i] ?? []), l;
|
|
19
|
+
}, {});
|
|
20
|
+
return Object.keys(a).length ? a : void 0;
|
|
21
|
+
}, ee = (m) => {
|
|
22
|
+
const { getLabel: a } = Z(), {
|
|
23
|
+
label: l = a("file-dropzone.label"),
|
|
24
|
+
className: c,
|
|
25
|
+
disabled: i = !1,
|
|
26
|
+
helper: D,
|
|
27
|
+
id: $,
|
|
28
|
+
name: x,
|
|
29
|
+
attachmentProps: f,
|
|
30
|
+
accept: y,
|
|
31
|
+
maxSize: u,
|
|
32
|
+
multiple: g,
|
|
33
|
+
validateIndividually: L,
|
|
34
|
+
defaultFiles: j,
|
|
35
|
+
files: A,
|
|
36
|
+
onChange: R,
|
|
37
|
+
onDelete: V,
|
|
38
|
+
announcementTimeout: C,
|
|
39
|
+
...P
|
|
40
|
+
} = m, { innerFiles: _, uploadErrorHelper: s, onFileChange: T, onFileRemove: B, announcement: M } = G({
|
|
41
|
+
accept: y,
|
|
42
|
+
maxSize: u,
|
|
43
|
+
multiple: g,
|
|
44
|
+
validateIndividually: L,
|
|
45
|
+
defaultFiles: j,
|
|
46
|
+
files: A,
|
|
47
|
+
onChange: R,
|
|
48
|
+
onDelete: V,
|
|
49
|
+
announcementTimeout: C
|
|
50
|
+
}), O = q.useId(), h = $ ?? O, { getRootProps: S, getInputProps: w, isDragActive: U } = E({
|
|
51
|
+
disabled: i,
|
|
52
|
+
accept: H(y),
|
|
53
|
+
multiple: g,
|
|
54
|
+
maxSize: u ? u * 1024 ** 2 : void 0,
|
|
55
|
+
onDrop: (e, r = []) => {
|
|
56
|
+
if (i) return;
|
|
57
|
+
const v = r.filter(
|
|
58
|
+
(z) => z.errors.some((F) => F.code === "file-too-large" || F.code === "file-invalid-type")
|
|
59
|
+
).map((z) => z.file), p = [...e, ...v];
|
|
60
|
+
if (p.length === 0) return;
|
|
61
|
+
T({
|
|
62
|
+
target: { files: p }
|
|
36
63
|
});
|
|
37
64
|
}
|
|
38
|
-
}),
|
|
39
|
-
|
|
40
|
-
{ [
|
|
65
|
+
}), t = (s == null ? void 0 : s.type) === "error" ? s : D ?? s, N = t ? t.id ?? `${h}-helper` : void 0, W = k(
|
|
66
|
+
o["tedi-file-dropzone"],
|
|
67
|
+
{ [o["tedi-file-dropzone--disabled"]]: i },
|
|
41
68
|
// Drive the visual state from the same `feedback` that is rendered, so the
|
|
42
69
|
// invalid/valid styling never diverges from the message shown.
|
|
43
|
-
{ [
|
|
44
|
-
{ [
|
|
45
|
-
{ [
|
|
46
|
-
|
|
70
|
+
{ [o["tedi-file-dropzone--invalid"]]: (t == null ? void 0 : t.type) === "error" },
|
|
71
|
+
{ [o["tedi-file-dropzone--valid"]]: (t == null ? void 0 : t.type) === "valid" },
|
|
72
|
+
{ [o["tedi-file-dropzone--drop-over"]]: U },
|
|
73
|
+
c
|
|
47
74
|
);
|
|
48
|
-
return /* @__PURE__ */
|
|
49
|
-
/* @__PURE__ */
|
|
75
|
+
return /* @__PURE__ */ d(b, { children: [
|
|
76
|
+
/* @__PURE__ */ d(
|
|
50
77
|
"div",
|
|
51
78
|
{
|
|
52
|
-
...
|
|
79
|
+
...S({
|
|
53
80
|
role: "button",
|
|
54
|
-
tabIndex:
|
|
55
|
-
"aria-disabled":
|
|
56
|
-
"aria-describedby":
|
|
81
|
+
tabIndex: i ? -1 : 0,
|
|
82
|
+
"aria-disabled": i,
|
|
83
|
+
"aria-describedby": N
|
|
57
84
|
}),
|
|
58
|
-
className:
|
|
85
|
+
className: W,
|
|
59
86
|
children: [
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
|
|
62
|
-
U,
|
|
87
|
+
/* @__PURE__ */ n(
|
|
88
|
+
"input",
|
|
63
89
|
{
|
|
64
|
-
...
|
|
65
|
-
id:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
90
|
+
...w(),
|
|
91
|
+
id: h,
|
|
92
|
+
name: x,
|
|
93
|
+
className: o["tedi-file-dropzone__input"],
|
|
94
|
+
disabled: i
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ n("div", { className: o["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ n(
|
|
98
|
+
Y,
|
|
99
|
+
{
|
|
100
|
+
...P,
|
|
101
|
+
id: h,
|
|
102
|
+
label: /* @__PURE__ */ d(b, { children: [
|
|
103
|
+
/* @__PURE__ */ n(
|
|
104
|
+
J,
|
|
69
105
|
{
|
|
70
|
-
color:
|
|
106
|
+
color: i ? "tertiary" : "secondary",
|
|
71
107
|
size: 24,
|
|
72
108
|
name: "attach_file",
|
|
73
109
|
display: "inline",
|
|
74
|
-
className:
|
|
110
|
+
className: o["tedi-file-dropzone__label-icon"]
|
|
75
111
|
}
|
|
76
112
|
),
|
|
77
|
-
|
|
113
|
+
l
|
|
78
114
|
] }),
|
|
79
|
-
className:
|
|
115
|
+
className: o["tedi-file-dropzone__label"]
|
|
80
116
|
}
|
|
81
117
|
) })
|
|
82
118
|
]
|
|
83
119
|
}
|
|
84
120
|
),
|
|
85
|
-
|
|
86
|
-
!!
|
|
87
|
-
|
|
121
|
+
t && /* @__PURE__ */ n(X, { ...t, id: N }),
|
|
122
|
+
!!_.length && /* @__PURE__ */ n(
|
|
123
|
+
I,
|
|
88
124
|
{
|
|
89
|
-
className:
|
|
125
|
+
className: o["tedi-file-dropzone__file-list"],
|
|
90
126
|
style: "none",
|
|
91
|
-
"aria-label":
|
|
92
|
-
children:
|
|
93
|
-
const
|
|
94
|
-
return /* @__PURE__ */
|
|
95
|
-
|
|
127
|
+
"aria-label": a("file-dropzone.selected-files"),
|
|
128
|
+
children: _.map((e) => {
|
|
129
|
+
const r = typeof f == "function" ? f(e) : f, { actions: v, ...p } = r ?? {};
|
|
130
|
+
return /* @__PURE__ */ d(
|
|
131
|
+
I.Item,
|
|
96
132
|
{
|
|
97
|
-
className:
|
|
133
|
+
className: o["tedi-file-dropzone__file-list-item"],
|
|
98
134
|
children: [
|
|
99
|
-
/* @__PURE__ */
|
|
100
|
-
|
|
135
|
+
/* @__PURE__ */ n(
|
|
136
|
+
Q,
|
|
101
137
|
{
|
|
102
|
-
...
|
|
138
|
+
...p,
|
|
103
139
|
name: e.name ?? "",
|
|
104
|
-
isValid: e.isValid ?? (
|
|
105
|
-
isLoading: e.isLoading ?? (
|
|
106
|
-
actions: /* @__PURE__ */
|
|
107
|
-
|
|
108
|
-
/* @__PURE__ */
|
|
140
|
+
isValid: e.isValid ?? (r == null ? void 0 : r.isValid),
|
|
141
|
+
isLoading: e.isLoading ?? (r == null ? void 0 : r.isLoading),
|
|
142
|
+
actions: /* @__PURE__ */ d(b, { children: [
|
|
143
|
+
v,
|
|
144
|
+
/* @__PURE__ */ n(K, { visualType: "neutral", icon: "delete", onClick: () => B(e), children: `${a("remove")} ${e.name ?? ""}` })
|
|
109
145
|
] })
|
|
110
146
|
}
|
|
111
147
|
),
|
|
112
|
-
e.isValid === !1 && /* @__PURE__ */
|
|
148
|
+
e.isValid === !1 && /* @__PURE__ */ n("span", { className: "sr-only", children: `${a("file-dropzone.failed")} ${e.name ?? ""}` })
|
|
113
149
|
]
|
|
114
150
|
},
|
|
115
151
|
e.id ?? `${e.name ?? "file"}-${e.size ?? ""}-${e.lastModified ?? ""}`
|
|
@@ -117,9 +153,11 @@ const te = (l) => {
|
|
|
117
153
|
})
|
|
118
154
|
}
|
|
119
155
|
),
|
|
120
|
-
/* @__PURE__ */
|
|
156
|
+
/* @__PURE__ */ n("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: M })
|
|
121
157
|
] });
|
|
122
158
|
};
|
|
159
|
+
ee.displayName = "FileDropzone";
|
|
123
160
|
export {
|
|
124
|
-
|
|
161
|
+
ee as FileDropzone,
|
|
162
|
+
H as toDropzoneAccept
|
|
125
163
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone__label-icon":"tedi-file-dropzone__label-icon-180ef5ad","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621"};exports.default=e;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone__label-icon":"tedi-file-dropzone__label-icon-180ef5ad","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__input":"tedi-file-dropzone__input-c3c90d60","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621"};exports.default=e;
|
|
@@ -7,6 +7,7 @@ const e = {
|
|
|
7
7
|
"tedi-file-dropzone--invalid": "tedi-file-dropzone--invalid-159cce6d",
|
|
8
8
|
"tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
|
|
9
9
|
"tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
|
|
10
|
+
"tedi-file-dropzone__input": "tedi-file-dropzone__input-c3c90d60",
|
|
10
11
|
"tedi-file-dropzone__file-list": "tedi-file-dropzone__file-list-c1ededa3",
|
|
11
12
|
"tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621"
|
|
12
13
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),p=require("react"),de=require("../../../helpers/hooks/use-file-upload.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),p=require("react"),de=require("../../../helpers/hooks/use-file-upload.cjs.js"),re=require("../../base/typography/text/text.cjs.js"),S=require("../../buttons/button/button.cjs.js"),ce=require("../../buttons/closing-button/closing-button.cjs.js"),ue=require("../form-label/form-label.cjs.js"),fe=require("../../misc/separator/separator.cjs.js"),pe=require("../../tags/tag/tag.cjs.js"),z=require("../feedback-text/feedback-text.cjs.js"),g=require("../input-group/input-group.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),me=require("../../../providers/label-provider/use-labels.cjs.js"),M=require("../../../helpers/hooks/use-breakpoint.cjs.js"),xe=require("../../layout/grid/row.cjs.js"),O=require("../../layout/grid/col.cjs.js"),A=P=>{var U;const{getLabel:n}=me.useLabels(),{id:V,name:$,label:v,accept:y,multiple:F,onChange:m,className:D,wrapperClassName:W,defaultFiles:H,onDelete:J,hasClearButton:K=!0,files:c,readOnly:x,disabled:s=!1,maxSize:Q,validateIndividually:X=!1,showRestrictions:Y,size:u="default",helper:i,...Z}=P,{innerFiles:_,uploadErrorHelper:t,onFileChange:E,onFileRemove:G,handleClear:ee,announcement:le}=de.useFileUpload({accept:y,maxSize:Q,multiple:F,validateIndividually:X,defaultFiles:H,onChange:m,onDelete:J,files:c,showRestrictions:Y}),ae=M.default(),te=p.useId(),o=(U=g.useOptionalInputGroup)==null?void 0:U.call(g),ie=o==null?void 0:o.hasExternalLabel,f=V??(o==null?void 0:o.inputId)??te,q=p.useRef(null),N=p.useRef(null),se=j.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},D),B=(t==null?void 0:t.type)==="error",h=i??(B?void 0:t),b=B?t:void 0,C=h?(i==null?void 0:i.id)??`${f}-helper`:void 0,L=b?`${f}-error`:void 0,k=[C,L].filter(Boolean).join(" ")||void 0,d=p.useMemo(()=>c&&m?c:_,[c,_,m]),R=()=>{var l;return(l=N.current)==null?void 0:l.focus()},ne=l=>{G(l),R()},I=()=>{ee(),R()},oe=(l,r)=>{const w=l.isValid===!1;return e.jsx("li",{children:e.jsxs(pe.Tag,{role:"presentation",color:w?"danger":"primary",onClose:!l.isLoading&&!s&&!x?()=>ne(l):void 0,isLoading:l.isLoading,closeButtonProps:{title:`${n("remove")} ${l.name}`},children:[l.name,w&&e.jsxs("span",{className:"sr-only",children:[" (",n("file-upload.failed"),")"]})]})},l.id??r)},T=()=>{if(d.length>1)return e.jsx("ul",{className:a.default["tedi-file-upload__items"],children:d.map((l,r)=>oe(l,r))});if(d.length===1){const l=d[0],r=l.isValid===!1;return e.jsxs(re.Text,{className:j.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__items--truncate"]),children:[l.name,r&&e.jsxs("span",{className:"sr-only",children:[" (",n("file-upload.failed"),")"]})]})}return null};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["tedi-file-upload__label-wrapper"],children:!ie&&v&&e.jsx(ue.FormLabel,{id:f,label:v??"",...Z,renderWithoutLabel:x,className:a.default["tedi-file-upload__label"],size:u})}),e.jsx("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:le}),x?T():e.jsx("div",{className:j.default(a.default["tedi-file-upload__container"],{[a.default["tedi-file-upload--disabled"]]:s,[a.default["tedi-file-upload--error"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="error",[a.default["tedi-file-upload--valid"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="valid"},{[a.default[`tedi-file-upload__container--${u}`]]:u},W),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(xe.Row,{children:[e.jsx(O.Col,{className:"display-flex",children:T()}),e.jsx(O.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:se,children:[e.jsx("input",{ref:q,id:f,type:"file",name:$,accept:y,onChange:E,multiple:F,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":k}),K&&d.length>0&&!s&&e.jsxs(e.Fragment,{children:[M.isBreakpointBelow(ae,"md")?e.jsx(S.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:I,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(ce.ClosingButton,{onClick:I,iconSize:18,title:n("clear")}),e.jsx(fe.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(S.Button,{ref:N,visualType:"neutral",iconLeft:"file_upload",disabled:s,onClick:()=>{var l;return(l=q.current)==null?void 0:l.click()},className:a.default["tedi-file-upload__button"],size:u,"aria-describedby":k,children:n("file-upload.add")})]})})]})})}),h&&e.jsx(z.FeedbackText,{...h,id:C}),b&&e.jsx(z.FeedbackText,{...b,id:L})]})};A.displayName="FileUpload";exports.FileUpload=A;
|
|
@@ -72,13 +72,20 @@ export interface FileUploadProps extends Omit<FormLabelProps, 'id' | 'label'> {
|
|
|
72
72
|
*/
|
|
73
73
|
disabled?: boolean;
|
|
74
74
|
/**
|
|
75
|
-
* Maximum allowed file size in
|
|
75
|
+
* Maximum allowed file size in megabytes (MB).
|
|
76
76
|
*/
|
|
77
77
|
maxSize?: number;
|
|
78
78
|
/**
|
|
79
79
|
* If `true`, validates each file separately instead of rejecting all at once.
|
|
80
80
|
*/
|
|
81
81
|
validateIndividually?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Whether to show the auto-generated restrictions hint (allowed types / max size)
|
|
84
|
+
* below the field. Turn it off when the same info is shown elsewhere to avoid a
|
|
85
|
+
* duplicate — rejection error messages still render.
|
|
86
|
+
* @default true
|
|
87
|
+
*/
|
|
88
|
+
showRestrictions?: boolean;
|
|
82
89
|
/**
|
|
83
90
|
* Determines the visual size of the file upload field. Defaults to `"default"`.
|
|
84
91
|
*/
|
|
@@ -2,22 +2,22 @@ import { jsxs as t, Fragment as z, jsx as i } from "react/jsx-runtime";
|
|
|
2
2
|
import y from "../../../../../external/classnames/index.es.js";
|
|
3
3
|
import f from "react";
|
|
4
4
|
import { useFileUpload as ne } from "../../../helpers/hooks/use-file-upload.es.js";
|
|
5
|
-
import { Text as
|
|
5
|
+
import { Text as re } from "../../base/typography/text/text.es.js";
|
|
6
6
|
import { Button as S } from "../../buttons/button/button.es.js";
|
|
7
|
-
import { ClosingButton as
|
|
8
|
-
import { FormLabel as
|
|
9
|
-
import { Separator as
|
|
10
|
-
import { Tag as
|
|
7
|
+
import { ClosingButton as de } from "../../buttons/closing-button/closing-button.es.js";
|
|
8
|
+
import { FormLabel as ce } from "../form-label/form-label.es.js";
|
|
9
|
+
import { Separator as me } from "../../misc/separator/separator.es.js";
|
|
10
|
+
import { Tag as pe } from "../../tags/tag/tag.es.js";
|
|
11
11
|
import { FeedbackText as A } from "../feedback-text/feedback-text.es.js";
|
|
12
|
-
import { useOptionalInputGroup as
|
|
12
|
+
import { useOptionalInputGroup as ue } from "../input-group/input-group.es.js";
|
|
13
13
|
import l from "./file-upload.module.scss.es.js";
|
|
14
|
-
import { useLabels as
|
|
15
|
-
import
|
|
16
|
-
import { Row as
|
|
14
|
+
import { useLabels as fe } from "../../../providers/label-provider/use-labels.es.js";
|
|
15
|
+
import he, { isBreakpointBelow as ve } from "../../../helpers/hooks/use-breakpoint.es.js";
|
|
16
|
+
import { Row as be } from "../../layout/grid/row.es.js";
|
|
17
17
|
import { Col as M } from "../../layout/grid/col.es.js";
|
|
18
|
-
const
|
|
18
|
+
const _e = (O) => {
|
|
19
19
|
var $;
|
|
20
|
-
const { getLabel:
|
|
20
|
+
const { getLabel: n } = fe(), {
|
|
21
21
|
id: V,
|
|
22
22
|
name: D,
|
|
23
23
|
label: g,
|
|
@@ -31,13 +31,14 @@ const be = (O) => {
|
|
|
31
31
|
hasClearButton: J = !0,
|
|
32
32
|
files: m,
|
|
33
33
|
readOnly: v,
|
|
34
|
-
disabled:
|
|
34
|
+
disabled: s = !1,
|
|
35
35
|
maxSize: K,
|
|
36
36
|
validateIndividually: Q = !1,
|
|
37
|
+
showRestrictions: X,
|
|
37
38
|
size: p = "default",
|
|
38
39
|
helper: o,
|
|
39
|
-
...
|
|
40
|
-
} = O, { innerFiles: B, uploadErrorHelper: a, onFileChange:
|
|
40
|
+
...Y
|
|
41
|
+
} = O, { innerFiles: B, uploadErrorHelper: a, onFileChange: Z, onFileRemove: E, handleClear: G, announcement: ee } = ne({
|
|
41
42
|
accept: F,
|
|
42
43
|
maxSize: K,
|
|
43
44
|
multiple: N,
|
|
@@ -45,29 +46,30 @@ const be = (O) => {
|
|
|
45
46
|
defaultFiles: q,
|
|
46
47
|
onChange: h,
|
|
47
48
|
onDelete: H,
|
|
48
|
-
files: m
|
|
49
|
-
|
|
49
|
+
files: m,
|
|
50
|
+
showRestrictions: X
|
|
51
|
+
}), ie = he(), le = f.useId(), r = ($ = ue) == null ? void 0 : $(), ae = r == null ? void 0 : r.hasExternalLabel, u = V ?? (r == null ? void 0 : r.inputId) ?? le, C = f.useRef(null), L = f.useRef(null), oe = y(l["tedi-file-upload"], { [l["tedi-file-upload--disabled"]]: s }, P), x = (a == null ? void 0 : a.type) === "error", b = o ?? (x ? void 0 : a), _ = x ? a : void 0, R = b ? (o == null ? void 0 : o.id) ?? `${u}-helper` : void 0, k = _ ? `${u}-error` : void 0, I = [R, k].filter(Boolean).join(" ") || void 0, d = f.useMemo(() => m && h ? m : B, [m, B, h]), w = () => {
|
|
50
52
|
var e;
|
|
51
53
|
return (e = L.current) == null ? void 0 : e.focus();
|
|
52
|
-
},
|
|
53
|
-
|
|
54
|
+
}, te = (e) => {
|
|
55
|
+
E(e), w();
|
|
54
56
|
}, T = () => {
|
|
55
|
-
|
|
56
|
-
},
|
|
57
|
+
G(), w();
|
|
58
|
+
}, se = (e, c) => {
|
|
57
59
|
const j = e.isValid === !1;
|
|
58
60
|
return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ t(
|
|
59
|
-
|
|
61
|
+
pe,
|
|
60
62
|
{
|
|
61
63
|
role: "presentation",
|
|
62
64
|
color: j ? "danger" : "primary",
|
|
63
|
-
onClose: !e.isLoading && !
|
|
65
|
+
onClose: !e.isLoading && !s && !v ? () => te(e) : void 0,
|
|
64
66
|
isLoading: e.isLoading,
|
|
65
|
-
closeButtonProps: { title: `${
|
|
67
|
+
closeButtonProps: { title: `${n("remove")} ${e.name}` },
|
|
66
68
|
children: [
|
|
67
69
|
e.name,
|
|
68
70
|
j && /* @__PURE__ */ t("span", { className: "sr-only", children: [
|
|
69
71
|
" (",
|
|
70
|
-
|
|
72
|
+
n("file-upload.failed"),
|
|
71
73
|
")"
|
|
72
74
|
] })
|
|
73
75
|
]
|
|
@@ -75,14 +77,14 @@ const be = (O) => {
|
|
|
75
77
|
) }, e.id ?? c);
|
|
76
78
|
}, U = () => {
|
|
77
79
|
if (d.length > 1)
|
|
78
|
-
return /* @__PURE__ */ i("ul", { className: l["tedi-file-upload__items"], children: d.map((e, c) =>
|
|
80
|
+
return /* @__PURE__ */ i("ul", { className: l["tedi-file-upload__items"], children: d.map((e, c) => se(e, c)) });
|
|
79
81
|
if (d.length === 1) {
|
|
80
82
|
const e = d[0], c = e.isValid === !1;
|
|
81
|
-
return /* @__PURE__ */ t(
|
|
83
|
+
return /* @__PURE__ */ t(re, { className: y(l["tedi-file-upload__items"], l["tedi-file-upload__items--truncate"]), children: [
|
|
82
84
|
e.name,
|
|
83
85
|
c && /* @__PURE__ */ t("span", { className: "sr-only", children: [
|
|
84
86
|
" (",
|
|
85
|
-
|
|
87
|
+
n("file-upload.failed"),
|
|
86
88
|
")"
|
|
87
89
|
] })
|
|
88
90
|
] });
|
|
@@ -90,34 +92,34 @@ const be = (O) => {
|
|
|
90
92
|
return null;
|
|
91
93
|
};
|
|
92
94
|
return /* @__PURE__ */ t(z, { children: [
|
|
93
|
-
/* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: !
|
|
94
|
-
|
|
95
|
+
/* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: !ae && g && /* @__PURE__ */ i(
|
|
96
|
+
ce,
|
|
95
97
|
{
|
|
96
98
|
id: u,
|
|
97
99
|
label: g ?? "",
|
|
98
|
-
...
|
|
100
|
+
...Y,
|
|
99
101
|
renderWithoutLabel: v,
|
|
100
102
|
className: l["tedi-file-upload__label"],
|
|
101
103
|
size: p
|
|
102
104
|
}
|
|
103
105
|
) }),
|
|
104
|
-
/* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children:
|
|
106
|
+
/* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: ee }),
|
|
105
107
|
v ? U() : /* @__PURE__ */ i(
|
|
106
108
|
"div",
|
|
107
109
|
{
|
|
108
110
|
className: y(
|
|
109
111
|
l["tedi-file-upload__container"],
|
|
110
112
|
{
|
|
111
|
-
[l["tedi-file-upload--disabled"]]:
|
|
113
|
+
[l["tedi-file-upload--disabled"]]: s,
|
|
112
114
|
[l["tedi-file-upload--error"]]: ((a == null ? void 0 : a.type) || (o == null ? void 0 : o.type)) === "error",
|
|
113
115
|
[l["tedi-file-upload--valid"]]: ((a == null ? void 0 : a.type) || (o == null ? void 0 : o.type)) === "valid"
|
|
114
116
|
},
|
|
115
117
|
{ [l[`tedi-file-upload__container--${p}`]]: p },
|
|
116
118
|
W
|
|
117
119
|
),
|
|
118
|
-
children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ t(
|
|
120
|
+
children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ t(be, { children: [
|
|
119
121
|
/* @__PURE__ */ i(M, { className: "display-flex", children: U() }),
|
|
120
|
-
/* @__PURE__ */ i(M, { xs: 12, md: "auto", children: /* @__PURE__ */ t("div", { className:
|
|
122
|
+
/* @__PURE__ */ i(M, { xs: 12, md: "auto", children: /* @__PURE__ */ t("div", { className: oe, children: [
|
|
121
123
|
/* @__PURE__ */ i(
|
|
122
124
|
"input",
|
|
123
125
|
{
|
|
@@ -126,26 +128,26 @@ const be = (O) => {
|
|
|
126
128
|
type: "file",
|
|
127
129
|
name: D,
|
|
128
130
|
accept: F,
|
|
129
|
-
onChange:
|
|
131
|
+
onChange: Z,
|
|
130
132
|
multiple: N,
|
|
131
|
-
disabled:
|
|
133
|
+
disabled: s,
|
|
132
134
|
"aria-invalid": !!a && a.type === "error",
|
|
133
|
-
"aria-describedby":
|
|
135
|
+
"aria-describedby": I
|
|
134
136
|
}
|
|
135
137
|
),
|
|
136
|
-
J && d.length > 0 && !
|
|
137
|
-
|
|
138
|
+
J && d.length > 0 && !s && /* @__PURE__ */ t(z, { children: [
|
|
139
|
+
ve(ie, "md") ? /* @__PURE__ */ i(
|
|
138
140
|
S,
|
|
139
141
|
{
|
|
140
142
|
visualType: "neutral",
|
|
141
143
|
iconLeft: "close",
|
|
142
|
-
disabled:
|
|
144
|
+
disabled: s,
|
|
143
145
|
onClick: T,
|
|
144
146
|
className: l["tedi-file-upload__button"],
|
|
145
|
-
children:
|
|
147
|
+
children: n("clear")
|
|
146
148
|
}
|
|
147
|
-
) : /* @__PURE__ */ i(
|
|
148
|
-
/* @__PURE__ */ i(
|
|
149
|
+
) : /* @__PURE__ */ i(de, { onClick: T, iconSize: 18, title: n("clear") }),
|
|
150
|
+
/* @__PURE__ */ i(me, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
|
|
149
151
|
] }),
|
|
150
152
|
/* @__PURE__ */ i(
|
|
151
153
|
S,
|
|
@@ -153,26 +155,26 @@ const be = (O) => {
|
|
|
153
155
|
ref: L,
|
|
154
156
|
visualType: "neutral",
|
|
155
157
|
iconLeft: "file_upload",
|
|
156
|
-
disabled:
|
|
158
|
+
disabled: s,
|
|
157
159
|
onClick: () => {
|
|
158
160
|
var e;
|
|
159
161
|
return (e = C.current) == null ? void 0 : e.click();
|
|
160
162
|
},
|
|
161
163
|
className: l["tedi-file-upload__button"],
|
|
162
164
|
size: p,
|
|
163
|
-
"aria-describedby":
|
|
164
|
-
children:
|
|
165
|
+
"aria-describedby": I,
|
|
166
|
+
children: n("file-upload.add")
|
|
165
167
|
}
|
|
166
168
|
)
|
|
167
169
|
] }) })
|
|
168
170
|
] }) })
|
|
169
171
|
}
|
|
170
172
|
),
|
|
171
|
-
b && /* @__PURE__ */ i(A, { ...b, id:
|
|
172
|
-
_ && /* @__PURE__ */ i(A, { ..._, id:
|
|
173
|
+
b && /* @__PURE__ */ i(A, { ...b, id: R }),
|
|
174
|
+
_ && /* @__PURE__ */ i(A, { ..._, id: k })
|
|
173
175
|
] });
|
|
174
176
|
};
|
|
175
|
-
|
|
177
|
+
_e.displayName = "FileUpload";
|
|
176
178
|
export {
|
|
177
|
-
|
|
179
|
+
_e as FileUpload
|
|
178
180
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),_=require("../../providers/label-provider/use-labels.cjs.js"),q=({accept:F,maxSize:o},f)=>{if(!F&&!o)return;const p=[F&&`${f("file-upload.accept")} ${F.replaceAll(",",", ")}`,o&&`${f("file-upload.max-size")} ${o}MB`].filter(Boolean).join(". ");return p.length?{text:p}:void 0},B=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,k=100,P=F=>{const{getLabel:o}=_.useLabels(),{accept:f,maxSize:p,multiple:$=!1,validateIndividually:b=!1,defaultFiles:H=[],onChange:l,onDelete:m,files:x,announcementTimeout:M=5e3,showRestrictions:L=!0}=F,g=x!==void 0,[A,j]=u.useState(H),c=g?x:A,C=L?q({accept:f,maxSize:p},o):void 0,[N,h]=u.useState(void 0),V=N??C,[z,w]=u.useState(""),y=u.useRef(!0),v=u.useRef(),T=u.useRef();u.useEffect(()=>()=>{y.current=!1,v.current&&clearTimeout(v.current),T.current&&clearTimeout(T.current)},[]);const E=u.useCallback(e=>{!e||!y.current||(w(""),v.current&&clearTimeout(v.current),T.current&&clearTimeout(T.current),v.current=setTimeout(()=>{y.current&&(w(e),T.current=setTimeout(()=>{y.current&&w("")},M))},k))},[M]),a=u.useRef(null),I=e=>{var i;if(!f)return!0;const s=f.split(",").map(d=>d.trim().toLowerCase()),n=e.name.includes(".")?`.${(i=e.name.split(".").pop())==null?void 0:i.toLowerCase()}`:"",r=e.type.toLowerCase();return s.includes(n)||s.includes(r)},O=e=>{const s=e.reduce((n,{type:r,file:i})=>(n[r].push(i.name),n),{extension:[],size:[]});return Object.entries(s).filter(([n,r])=>r.length).map(([n,r])=>{const i=r.map(d=>`'${d}'`).join(", ");return o(`file-upload.${n}-rejected`,i)}).join(". ")};return{innerFiles:c,uploadErrorHelper:V,onFileChange:e=>{if(e.target.files){const s=Array.from(e.target.files),n=[],r=s.map(t=>{const R=I(t),S=!p||t.size<=p*1024**2;R||n.push({type:"extension",file:t}),S||n.push({type:"size",file:t});const U=new File([t],t.name,{type:t.type,lastModified:t.lastModified});return Object.assign(U,{id:B(),isLoading:!1,isValid:R&&S})});let i;if(!$)i=r.length>0&&r[0].isValid?[r[0]]:c;else if(b)i=[...c,...r];else{const t=r.filter(R=>R.isValid);i=t.length>0?[...c,...t]:c}const d=i.filter(t=>!c.includes(t)).length;if(d>0&&!g&&j(i),l==null||l(i),n.length){const t=O(n);h({type:"error",text:t}),E(t)}else h(void 0),d>0&&E(o("file-upload.success-added",d.toString()));e.target.value="",a.current&&(a.current.value="")}},onFileRemove:e=>{const s=c.filter(n=>n!==e);g||j(s),m==null||m(e),l==null||l(s),s.length===0&&h(void 0),E(o("file-upload.removed",e.name??"")),a.current&&(a.current.value="")},handleClear:()=>{const e=[...c];return e.forEach(s=>m==null?void 0:m(s)),g||j([]),l==null||l([]),h(void 0),E(o("file-upload.cleared")),a.current&&(a.current.value=""),e},fileInputRef:a,announcement:z}};exports.useFileUpload=P;
|