@tedi-design-system/react 19.2.0-rc.1 → 19.2.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/bundle-stats.html +1 -1
  2. package/index.css +1 -1
  3. package/package.json +1 -1
  4. package/src/tedi/components/content/carousel/use-carousel.cjs.js +1 -1
  5. package/src/tedi/components/content/carousel/use-carousel.es.js +108 -106
  6. package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js +1 -1
  7. package/src/tedi/components/form/file-dropzone/file-dropzone.d.ts +10 -3
  8. package/src/tedi/components/form/file-dropzone/file-dropzone.es.js +103 -100
  9. package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js +1 -1
  10. package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js +5 -4
  11. package/src/tedi/helpers/hooks/use-file-upload.cjs.js +1 -1
  12. package/src/tedi/helpers/hooks/use-file-upload.d.ts +8 -0
  13. package/src/tedi/helpers/hooks/use-file-upload.es.js +102 -79
  14. package/src/tedi/providers/label-provider/labels-map.cjs.js +1 -1
  15. package/src/tedi/providers/label-provider/labels-map.d.ts +7 -0
  16. package/src/tedi/providers/label-provider/labels-map.es.js +19 -12
  17. package/tedi.cjs.js +1 -1
  18. package/tedi.es.js +46 -45
package/src/tedi/components/form/file-dropzone/file-dropzone.es.js CHANGED
@@ -1,116 +1,116 @@
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";
1
+ import { jsxs as c, Fragment as _, jsx as t } from "react/jsx-runtime";
2
+ import K from "../../../../../external/classnames/index.es.js";
3
+ import Q from "react";
4
+ import { useDropzone as X } from "../../../../../external/react-dropzone/dist/es/index.es.js";
5
+ import { useFileUpload as Y } from "../../../helpers/hooks/use-file-upload.es.js";
6
+ import { Icon as Z } from "../../base/icon/icon.es.js";
7
+ import { Button as ee } from "../../buttons/button/button.es.js";
8
+ import { Attachment as ie } from "../../misc/attachment/attachment.es.js";
9
+ import { FeedbackText as x } from "../feedback-text/feedback-text.es.js";
10
+ import { FormLabel as oe } from "../form-label/form-label.es.js";
11
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) => {
12
+ import { useLabels as te } from "../../../providers/label-provider/use-labels.es.js";
13
+ import { List as L } from "../../content/list/list.es.js";
14
+ const re = (m) => {
15
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;
16
+ const a = m.split(",").reduce((r, u) => {
17
+ const i = u.trim();
18
+ return i && (i.startsWith(".") ? (r["*/*"] = r["*/*"] ?? [], r["*/*"].push(i)) : r[i] = r[i] ?? []), r;
19
19
  }, {});
20
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,
21
+ }, ne = (m) => {
22
+ const { getLabel: a } = te(), {
23
+ label: r = a("file-dropzone.label"),
24
+ className: u,
25
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({
26
+ helper: s,
27
+ id: j,
28
+ name: R,
29
+ required: k,
30
+ attachmentProps: v,
31
+ accept: g,
32
+ maxSize: h,
33
+ multiple: z,
34
+ validateIndividually: N,
35
+ defaultFiles: A,
36
+ files: B,
37
+ onChange: V,
38
+ onDelete: C,
39
+ announcementTimeout: E,
40
+ showRestrictions: P
41
+ } = m, { innerFiles: F, errorHelper: T, restrictionsHint: w, onFileChange: H, onFileRemove: M, announcement: O } = Y({
42
+ accept: g,
43
+ maxSize: h,
44
+ multiple: z,
45
+ validateIndividually: N,
46
+ defaultFiles: A,
47
+ files: B,
48
+ onChange: V,
49
+ onDelete: C,
50
+ announcementTimeout: E,
51
+ showRestrictions: P
52
+ }), S = Q.useId(), p = j ?? S, { getRootProps: q, getInputProps: U, isDragActive: W } = X({
51
53
  disabled: i,
52
- accept: H(y),
53
- multiple: g,
54
- maxSize: u ? u * 1024 ** 2 : void 0,
55
- onDrop: (e, r = []) => {
54
+ accept: re(g),
55
+ multiple: z,
56
+ maxSize: h ? h * 1024 ** 2 : void 0,
57
+ onDrop: (e, n = []) => {
56
58
  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 }
59
+ const b = n.filter(
60
+ (y) => y.errors.some((D) => D.code === "file-too-large" || D.code === "file-invalid-type")
61
+ ).map((y) => y.file), f = [...e, ...b];
62
+ if (f.length === 0) return;
63
+ H({
64
+ target: { files: f }
63
65
  });
64
66
  }
65
- }), t = (s == null ? void 0 : s.type) === "error" ? s : D ?? s, N = t ? t.id ?? `${h}-helper` : void 0, W = k(
67
+ }), d = (N && z ? void 0 : T) ?? ((s == null ? void 0 : s.type) === "error" ? s : void 0), l = s && s.type !== "error" ? s : w, I = d ? d.id ?? `${p}-error` : void 0, $ = l ? l.id ?? `${p}-helper` : void 0, G = [I, $].filter(Boolean).join(" ") || void 0, J = K(
66
68
  o["tedi-file-dropzone"],
67
69
  { [o["tedi-file-dropzone--disabled"]]: i },
68
- // Drive the visual state from the same `feedback` that is rendered, so the
69
- // invalid/valid styling never diverges from the message shown.
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
70
+ { [o["tedi-file-dropzone--invalid"]]: !!d },
71
+ { [o["tedi-file-dropzone--valid"]]: !d && (l == null ? void 0 : l.type) === "valid" },
72
+ { [o["tedi-file-dropzone--drop-over"]]: W },
73
+ u
74
74
  );
75
- return /* @__PURE__ */ d(b, { children: [
76
- /* @__PURE__ */ d(
75
+ return /* @__PURE__ */ c(_, { children: [
76
+ /* @__PURE__ */ c(
77
77
  "div",
78
78
  {
79
- ...S({
79
+ ...q({
80
80
  role: "button",
81
81
  tabIndex: i ? -1 : 0,
82
82
  "aria-disabled": i,
83
- "aria-describedby": N
83
+ "aria-describedby": G
84
84
  }),
85
- className: W,
85
+ className: J,
86
86
  children: [
87
- /* @__PURE__ */ n(
87
+ /* @__PURE__ */ t(
88
88
  "input",
89
89
  {
90
- ...w(),
91
- id: h,
92
- name: x,
90
+ ...U(),
91
+ id: p,
92
+ name: R,
93
93
  className: o["tedi-file-dropzone__input"],
94
94
  disabled: i
95
95
  }
96
96
  ),
97
- /* @__PURE__ */ n("div", { className: o["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ n(
98
- Y,
97
+ /* @__PURE__ */ t("div", { className: o["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ t(
98
+ oe,
99
99
  {
100
- ...P,
101
- id: h,
102
- label: /* @__PURE__ */ d(b, { children: [
103
- /* @__PURE__ */ n(
104
- J,
100
+ id: p,
101
+ required: k,
102
+ label: /* @__PURE__ */ c(_, { children: [
103
+ /* @__PURE__ */ t(
104
+ Z,
105
105
  {
106
- color: i ? "tertiary" : "secondary",
106
+ color: i ? "inherit" : "secondary",
107
107
  size: 24,
108
108
  name: "attach_file",
109
109
  display: "inline",
110
110
  className: o["tedi-file-dropzone__label-icon"]
111
111
  }
112
112
  ),
113
- l
113
+ r
114
114
  ] }),
115
115
  className: o["tedi-file-dropzone__label"]
116
116
  }
@@ -118,34 +118,37 @@ const H = (m) => {
118
118
  ]
119
119
  }
120
120
  ),
121
- t && /* @__PURE__ */ n(X, { ...t, id: N }),
122
- !!_.length && /* @__PURE__ */ n(
123
- I,
121
+ (d || l) && /* @__PURE__ */ c("div", { className: o["tedi-file-dropzone__feedback"], children: [
122
+ d && /* @__PURE__ */ t(x, { ...d, id: I }),
123
+ l && /* @__PURE__ */ t(x, { ...l, id: $ })
124
+ ] }),
125
+ !!F.length && /* @__PURE__ */ t(
126
+ L,
124
127
  {
125
128
  className: o["tedi-file-dropzone__file-list"],
126
129
  style: "none",
127
130
  "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,
131
+ children: F.map((e) => {
132
+ const n = typeof v == "function" ? v(e) : v, { actions: b, ...f } = n ?? {};
133
+ return /* @__PURE__ */ c(
134
+ L.Item,
132
135
  {
133
136
  className: o["tedi-file-dropzone__file-list-item"],
134
137
  children: [
135
- /* @__PURE__ */ n(
136
- Q,
138
+ /* @__PURE__ */ t(
139
+ ie,
137
140
  {
138
- ...p,
141
+ ...f,
139
142
  name: e.name ?? "",
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 ?? ""}` })
143
+ isValid: e.isValid ?? (n == null ? void 0 : n.isValid),
144
+ isLoading: e.isLoading ?? (n == null ? void 0 : n.isLoading),
145
+ actions: /* @__PURE__ */ c(_, { children: [
146
+ b,
147
+ /* @__PURE__ */ t(ee, { visualType: "neutral", icon: "delete", onClick: () => M(e), children: `${a("remove")} ${e.name ?? ""}` })
145
148
  ] })
146
149
  }
147
150
  ),
148
- e.isValid === !1 && /* @__PURE__ */ n("span", { className: "sr-only", children: `${a("file-dropzone.failed")} ${e.name ?? ""}` })
151
+ e.isValid === !1 && /* @__PURE__ */ t("span", { className: "sr-only", children: `${a("file-dropzone.failed")} ${e.name ?? ""}` })
149
152
  ]
150
153
  },
151
154
  e.id ?? `${e.name ?? "file"}-${e.size ?? ""}-${e.lastModified ?? ""}`
@@ -153,11 +156,11 @@ const H = (m) => {
153
156
  })
154
157
  }
155
158
  ),
156
- /* @__PURE__ */ n("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: M })
159
+ /* @__PURE__ */ t("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: O })
157
160
  ] });
158
161
  };
159
- ee.displayName = "FileDropzone";
162
+ ne.displayName = "FileDropzone";
160
163
  export {
161
- ee as FileDropzone,
162
- H as toDropzoneAccept
164
+ ne as FileDropzone,
165
+ re as toDropzoneAccept
163
166
  };
package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js CHANGED
@@ -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__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;
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--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","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__input":"tedi-file-dropzone__input-c3c90d60","tedi-file-dropzone__feedback":"tedi-file-dropzone__feedback-782071d4","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;
package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js CHANGED
@@ -1,13 +1,14 @@
1
1
  const e = {
2
2
  "tedi-file-dropzone": "tedi-file-dropzone-70698e52",
3
+ "tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
4
+ "tedi-file-dropzone--invalid": "tedi-file-dropzone--invalid-159cce6d",
5
+ "tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
6
+ "tedi-file-dropzone--disabled": "tedi-file-dropzone--disabled-0e01143d",
3
7
  "tedi-file-dropzone__label-wrapper": "tedi-file-dropzone__label-wrapper-78360685",
4
8
  "tedi-file-dropzone__label": "tedi-file-dropzone__label-5c15bc34",
5
9
  "tedi-file-dropzone__label-icon": "tedi-file-dropzone__label-icon-180ef5ad",
6
- "tedi-file-dropzone--disabled": "tedi-file-dropzone--disabled-0e01143d",
7
- "tedi-file-dropzone--invalid": "tedi-file-dropzone--invalid-159cce6d",
8
- "tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
9
- "tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
10
10
  "tedi-file-dropzone__input": "tedi-file-dropzone__input-c3c90d60",
11
+ "tedi-file-dropzone__feedback": "tedi-file-dropzone__feedback-782071d4",
11
12
  "tedi-file-dropzone__file-list": "tedi-file-dropzone__file-list-c1ededa3",
12
13
  "tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621"
13
14
  };
package/src/tedi/helpers/hooks/use-file-upload.cjs.js CHANGED
@@ -1 +1 @@
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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),W=require("../../providers/label-provider/use-labels.cjs.js"),C=s=>{if(s<1024)return`${s} B`;const n=["KB","MB","GB","TB"];let c=s/1024,d=0;for(;c>=1024&&d<n.length-1;)c/=1024,d+=1;return`${Math.round(c*10)/10} ${n[d]}`},G=({accept:s,maxSize:n},c)=>{if(!s&&!n)return;const d=[s&&`${c("file-upload.accept")} ${s.replaceAll(",",", ")}`,n&&`${c("file-upload.max-size")} ${C(n*1024**2)}`].filter(Boolean).join(". ");return d.length?{text:d}:void 0},K=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,z=(s,n)=>s.name===n.name&&s.size===n.size&&s.lastModified===n.lastModified,P=100,Y=s=>{const{getLabel:n}=W.useLabels(),{accept:c,maxSize:d,multiple:A=!1,validateIndividually:I=!1,defaultFiles:N=[],onChange:f,onDelete:h,files:B,announcementTimeout:H=5e3,showRestrictions:b=!0}=s,$=B!==void 0,[O,x]=p.useState(N),u=$?B:O,L=b?G({accept:c,maxSize:d},n):void 0,[V,E]=p.useState(void 0),U=V??L,[_,R]=p.useState(""),M=p.useRef(!0),v=p.useRef(),T=p.useRef();p.useEffect(()=>()=>{M.current=!1,v.current&&clearTimeout(v.current),T.current&&clearTimeout(T.current)},[]);const j=p.useCallback(t=>{!t||!M.current||(R(""),v.current&&clearTimeout(v.current),T.current&&clearTimeout(T.current),v.current=setTimeout(()=>{M.current&&(R(t),T.current=setTimeout(()=>{M.current&&R("")},H))},P))},[H]),F=p.useRef(null),k=t=>{var m;if(!c)return!0;const l=c.split(",").map(o=>o.trim().toLowerCase()),r=t.name.includes(".")?`.${(m=t.name.split(".").pop())==null?void 0:m.toLowerCase()}`:"",i=t.type.toLowerCase();return l.some(o=>o==="*"||o==="*/*"?!0:o.endsWith("/*")?i.startsWith(o.slice(0,-1)):o===r||o===i)},q=t=>{const l=t.reduce((r,{type:i,file:m})=>(r[i].push(m.name),r),{extension:[],size:[]});return Object.entries(l).filter(([r,i])=>i.length).map(([r,i])=>{const m=i.map(o=>`'${o}'`).join(", ");return n(`file-upload.${r}-rejected`,m)}).join(". ")};return{innerFiles:u,uploadErrorHelper:U,errorHelper:V,restrictionsHint:L,onFileChange:t=>{if(t.target.files){const l=Array.from(t.target.files),r=[],i=l.map(e=>{const a=k(e),w=!d||e.size<=d*1024**2;a||r.push({type:"extension",file:e}),w||r.push({type:"size",file:e});const S=new File([e],e.name,{type:e.type,lastModified:e.lastModified});return Object.assign(S,{id:K(),isLoading:!1,isValid:a&&w})}),m=e=>e.filter((a,w)=>!u.some(S=>z(S,a))&&e.findIndex(S=>z(S,a))===w),o=A?Array.from(new Set(i.filter(e=>u.some(a=>z(a,e))).map(e=>e.name??""))):[];let g;if(!A)g=i.length>0&&i[0].isValid?[i[0]]:u;else if(I){const e=m(i);g=e.length>0?[...u,...e]:u}else{const e=m(i.filter(a=>a.isValid));g=e.length>0?[...u,...e]:u}const y=g.filter(e=>!u.includes(e)).length;if(y>0&&!$&&x(g),f==null||f(g),r.length){const e=q(r);E({type:"error",text:e}),j(e)}else{E(void 0);const e=[y>0&&n("file-upload.success-added",y.toString()),o.length&&n("file-upload.duplicates-skipped",o.map(a=>`'${a}'`).join(", "))].filter(Boolean);e.length&&j(e.join(". "))}t.target.value="",F.current&&(F.current.value="")}},onFileRemove:t=>{const l=u.filter(r=>r!==t);$||x(l),h==null||h(t),f==null||f(l),(l.length===0||t.isValid===!1&&!l.some(r=>r.isValid===!1))&&E(void 0),j(n("file-upload.removed",t.name??"")),F.current&&(F.current.value="")},handleClear:()=>{const t=[...u];return t.forEach(l=>h==null?void 0:h(l)),$||x([]),f==null||f([]),E(void 0),j(n("file-upload.cleared")),F.current&&(F.current.value=""),t},fileInputRef:F,announcement:_}};exports.formatFileSize=C;exports.useFileUpload=Y;
package/src/tedi/helpers/hooks/use-file-upload.d.ts CHANGED
@@ -76,9 +76,17 @@ export interface UseFileUploadProps {
76
76
  */
77
77
  showRestrictions?: boolean;
78
78
  }
79
+ /**
80
+ * Formats a byte count into a readable size (`512 KB`, `2.5 MB`, …). Uses 1024-based
81
+ * units to stay consistent with the size validation (`maxSize * 1024 ** 2`), and rolls
82
+ * sub-1-unit values down so `0.5 MB` reads as `512 KB` rather than `0.5MB` (#888).
83
+ */
84
+ export declare const formatFileSize: (bytes: number) => string;
79
85
  export declare const useFileUpload: (props: UseFileUploadProps) => {
80
86
  innerFiles: FileUploadFile[];
81
87
  uploadErrorHelper: FeedbackTextProps | undefined;
88
+ errorHelper: FeedbackTextProps | undefined;
89
+ restrictionsHint: FeedbackTextProps | undefined;
82
90
  onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
83
91
  onFileRemove: (file: FileUploadFile) => void;
84
92
  handleClear: () => FileUploadFile[];
package/src/tedi/helpers/hooks/use-file-upload.es.js CHANGED
@@ -1,100 +1,123 @@
1
- import c, { useEffect as U } from "react";
2
- import { useLabels as B } from "../../providers/label-provider/use-labels.es.js";
3
- const k = ({ accept: F, maxSize: o }, f) => {
4
- if (!F && !o) return;
5
- const p = [
6
- F && `${f("file-upload.accept")} ${F.replaceAll(",", ", ")}`,
7
- o && `${f("file-upload.max-size")} ${o}MB`
1
+ import p, { useEffect as b } from "react";
2
+ import { useLabels as G } from "../../providers/label-provider/use-labels.es.js";
3
+ const K = (s) => {
4
+ if (s < 1024) return `${s} B`;
5
+ const n = ["KB", "MB", "GB", "TB"];
6
+ let c = s / 1024, d = 0;
7
+ for (; c >= 1024 && d < n.length - 1; )
8
+ c /= 1024, d += 1;
9
+ return `${Math.round(c * 10) / 10} ${n[d]}`;
10
+ }, Y = ({ accept: s, maxSize: n }, c) => {
11
+ if (!s && !n) return;
12
+ const d = [
13
+ s && `${c("file-upload.accept")} ${s.replaceAll(",", ", ")}`,
14
+ n && `${c("file-upload.max-size")} ${K(n * 1024 ** 2)}`
8
15
  ].filter(Boolean).join(". ");
9
- return p.length ? { text: p } : void 0;
10
- }, Y = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, q = 100, Q = (F) => {
11
- const { getLabel: o } = B(), {
12
- accept: f,
13
- maxSize: p,
14
- multiple: H = !1,
15
- validateIndividually: S = !1,
16
- defaultFiles: A = [],
17
- onChange: l,
18
- onDelete: m,
19
- files: $,
20
- announcementTimeout: j = 5e3,
21
- showRestrictions: C = !0
22
- } = F, h = $ !== void 0, [L, R] = c.useState(A), u = h ? $ : L, N = C ? k({ accept: f, maxSize: p }, o) : void 0, [V, g] = c.useState(void 0), _ = V ?? N, [b, w] = c.useState(""), y = c.useRef(!0), v = c.useRef(), T = c.useRef();
23
- U(() => () => {
24
- y.current = !1, v.current && clearTimeout(v.current), T.current && clearTimeout(T.current);
16
+ return d.length ? { text: d } : void 0;
17
+ }, q = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, A = (s, n) => s.name === n.name && s.size === n.size && s.lastModified === n.lastModified, D = 100, ee = (s) => {
18
+ const { getLabel: n } = G(), {
19
+ accept: c,
20
+ maxSize: d,
21
+ multiple: B = !1,
22
+ validateIndividually: I = !1,
23
+ defaultFiles: L = [],
24
+ onChange: f,
25
+ onDelete: F,
26
+ files: H,
27
+ announcementTimeout: V = 5e3,
28
+ showRestrictions: N = !0
29
+ } = s, x = H !== void 0, [_, R] = p.useState(L), a = x ? H : _, y = N ? Y({ accept: c, maxSize: d }, n) : void 0, [C, E] = p.useState(void 0), O = C ?? y, [U, S] = p.useState(""), w = p.useRef(!0), v = p.useRef(), T = p.useRef();
30
+ b(() => () => {
31
+ w.current = !1, v.current && clearTimeout(v.current), T.current && clearTimeout(T.current);
25
32
  }, []);
26
- const E = c.useCallback(
27
- (e) => {
28
- !e || !y.current || (w(""), v.current && clearTimeout(v.current), T.current && clearTimeout(T.current), v.current = setTimeout(() => {
29
- y.current && (w(e), T.current = setTimeout(() => {
30
- y.current && w("");
31
- }, j));
32
- }, q));
33
+ const M = p.useCallback(
34
+ (t) => {
35
+ !t || !w.current || (S(""), v.current && clearTimeout(v.current), T.current && clearTimeout(T.current), v.current = setTimeout(() => {
36
+ w.current && (S(t), T.current = setTimeout(() => {
37
+ w.current && S("");
38
+ }, V));
39
+ }, D));
33
40
  },
34
- [j]
35
- ), a = c.useRef(null), z = (e) => {
36
- var i;
37
- if (!f) return !0;
38
- 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();
39
- return s.includes(n) || s.includes(r);
40
- }, I = (e) => {
41
- const s = e.reduce(
42
- (n, { type: r, file: i }) => (n[r].push(i.name), n),
41
+ [V]
42
+ ), h = p.useRef(null), k = (t) => {
43
+ var m;
44
+ if (!c) return !0;
45
+ const l = c.split(",").map((o) => o.trim().toLowerCase()), r = t.name.includes(".") ? `.${(m = t.name.split(".").pop()) == null ? void 0 : m.toLowerCase()}` : "", i = t.type.toLowerCase();
46
+ return l.some((o) => o === "*" || o === "*/*" ? !0 : o.endsWith("/*") ? i.startsWith(o.slice(0, -1)) : o === r || o === i);
47
+ }, W = (t) => {
48
+ const l = t.reduce(
49
+ (r, { type: i, file: m }) => (r[i].push(m.name), r),
43
50
  { extension: [], size: [] }
44
51
  );
45
- return Object.entries(s).filter(([n, r]) => r.length).map(([n, r]) => {
46
- const i = r.map((d) => `'${d}'`).join(", ");
47
- return o(`file-upload.${n}-rejected`, i);
52
+ return Object.entries(l).filter(([r, i]) => i.length).map(([r, i]) => {
53
+ const m = i.map((o) => `'${o}'`).join(", ");
54
+ return n(`file-upload.${r}-rejected`, m);
48
55
  }).join(". ");
49
56
  };
50
57
  return {
51
- innerFiles: u,
52
- uploadErrorHelper: _,
53
- onFileChange: (e) => {
54
- if (e.target.files) {
55
- const s = Array.from(e.target.files), n = [], r = s.map((t) => {
56
- const x = z(t), M = !p || t.size <= p * 1024 ** 2;
57
- x || n.push({ type: "extension", file: t }), M || n.push({ type: "size", file: t });
58
- const O = new File([t], t.name, {
59
- type: t.type,
60
- lastModified: t.lastModified
58
+ innerFiles: a,
59
+ uploadErrorHelper: O,
60
+ errorHelper: C,
61
+ restrictionsHint: y,
62
+ onFileChange: (t) => {
63
+ if (t.target.files) {
64
+ const l = Array.from(t.target.files), r = [], i = l.map((e) => {
65
+ const u = k(e), j = !d || e.size <= d * 1024 ** 2;
66
+ u || r.push({ type: "extension", file: e }), j || r.push({ type: "size", file: e });
67
+ const $ = new File([e], e.name, {
68
+ type: e.type,
69
+ lastModified: e.lastModified
61
70
  });
62
- return Object.assign(O, {
63
- id: Y(),
71
+ return Object.assign($, {
72
+ id: q(),
64
73
  isLoading: !1,
65
- isValid: x && M
74
+ isValid: u && j
66
75
  });
67
- });
68
- let i;
69
- if (!H)
70
- i = r.length > 0 && r[0].isValid ? [r[0]] : u;
71
- else if (S)
72
- i = [...u, ...r];
73
- else {
74
- const t = r.filter((x) => x.isValid);
75
- i = t.length > 0 ? [...u, ...t] : u;
76
+ }), m = (e) => e.filter(
77
+ (u, j) => !a.some(($) => A($, u)) && e.findIndex(($) => A($, u)) === j
78
+ ), o = B ? Array.from(
79
+ new Set(
80
+ i.filter((e) => a.some((u) => A(u, e))).map((e) => e.name ?? "")
81
+ )
82
+ ) : [];
83
+ let g;
84
+ if (!B)
85
+ g = i.length > 0 && i[0].isValid ? [i[0]] : a;
86
+ else if (I) {
87
+ const e = m(i);
88
+ g = e.length > 0 ? [...a, ...e] : a;
89
+ } else {
90
+ const e = m(i.filter((u) => u.isValid));
91
+ g = e.length > 0 ? [...a, ...e] : a;
76
92
  }
77
- const d = i.filter((t) => !u.includes(t)).length;
78
- if (d > 0 && !h && R(i), l == null || l(i), n.length) {
79
- const t = I(n);
80
- g({ type: "error", text: t }), E(t);
81
- } else
82
- g(void 0), d > 0 && E(o("file-upload.success-added", d.toString()));
83
- e.target.value = "", a.current && (a.current.value = "");
93
+ const z = g.filter((e) => !a.includes(e)).length;
94
+ if (z > 0 && !x && R(g), f == null || f(g), r.length) {
95
+ const e = W(r);
96
+ E({ type: "error", text: e }), M(e);
97
+ } else {
98
+ E(void 0);
99
+ const e = [
100
+ z > 0 && n("file-upload.success-added", z.toString()),
101
+ o.length && n("file-upload.duplicates-skipped", o.map((u) => `'${u}'`).join(", "))
102
+ ].filter(Boolean);
103
+ e.length && M(e.join(". "));
104
+ }
105
+ t.target.value = "", h.current && (h.current.value = "");
84
106
  }
85
107
  },
86
- onFileRemove: (e) => {
87
- const s = u.filter((n) => n !== e);
88
- h || R(s), m == null || m(e), l == null || l(s), s.length === 0 && g(void 0), E(o("file-upload.removed", e.name ?? "")), a.current && (a.current.value = "");
108
+ onFileRemove: (t) => {
109
+ const l = a.filter((r) => r !== t);
110
+ x || R(l), F == null || F(t), f == null || f(l), (l.length === 0 || t.isValid === !1 && !l.some((r) => r.isValid === !1)) && E(void 0), M(n("file-upload.removed", t.name ?? "")), h.current && (h.current.value = "");
89
111
  },
90
112
  handleClear: () => {
91
- const e = [...u];
92
- return e.forEach((s) => m == null ? void 0 : m(s)), h || R([]), l == null || l([]), g(void 0), E(o("file-upload.cleared")), a.current && (a.current.value = ""), e;
113
+ const t = [...a];
114
+ return t.forEach((l) => F == null ? void 0 : F(l)), x || R([]), f == null || f([]), E(void 0), M(n("file-upload.cleared")), h.current && (h.current.value = ""), t;
93
115
  },
94
- fileInputRef: a,
95
- announcement: b
116
+ fileInputRef: h,
117
+ announcement: U
96
118
  };
97
119
  };
98
120
  export {
99
- Q as useFileUpload
121
+ K as formatFileSize,
122
+ ee as useFileUpload
100
123
  };