@tedi-design-system/react 19.1.2-rc.4 → 19.2.0-rc.2

package/src/tedi/components/form/textfield/textfield.es.js

@@ -1,162 +1,164 @@
 import { jsx as n, jsxs as S } from "react/jsx-runtime";
 import _ from "../../../../../external/classnames/index.es.js";
-import y, { forwardRef as _e, useMemo as b, useCallback as B } from "react";
+import y, { forwardRef as be, useMemo as b, useCallback as w } from "react";
 import { Icon as D } from "../../base/icon/icon.es.js";
-import { ClosingButton as be } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as Ie } from "../../misc/separator/separator.es.js";
+import { ClosingButton as Ie } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as ge } from "../../misc/separator/separator.es.js";
 import { FeedbackText as U } from "../feedback-text/feedback-text.es.js";
-import { Field as ge } from "../field/field.es.js";
-import { FormLabel as Ne } from "../form-label/form-label.es.js";
-import { useOptionalInputGroup as Ae } from "../input-group/input-group.es.js";
-import t from "./textfield.module.scss.es.js";
+import { Field as Ne } from "../field/field.es.js";
+import { FormLabel as Ae } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as Ce } from "../input-group/input-group.es.js";
+import r from "./textfield.module.scss.es.js";
 import { useBreakpointProps as ke } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as Ce } from "../../../providers/label-provider/use-labels.es.js";
-const Se = {
+import { useLabels as Se } from "../../../providers/label-provider/use-labels.es.js";
+const we = {
   large: 24,
   default: 18
-}, Be = _e((I, J) => {
+}, Be = be((I, J) => {
   var M;
   const { getCurrentBreakpointProps: Q } = ke(I.defaultServerBreakpoint), {
-    id: we,
+    id: ze,
     label: g,
     className: W,
     inputClassName: X,
     disabled: d,
-    required: w,
+    required: B,
     hideLabel: z,
-    invalid: c,
+    invalid: f,
     readOnly: F,
     icon: i,
-    onIconClick: v,
+    onIconClick: x,
     iconButtonProps: p,
     size: s = "default",
     placeholder: Y,
     isArrowsHidden: Z = !0,
     isClearable: R,
-    onClear: x,
+    showClearOnInteraction: G,
+    onClear: v,
     onChange: o,
-    onChangeEvent: G,
-    onKeyUp: ee,
-    onKeyDown: re,
-    onKeyPress: te,
+    onChangeEvent: ee,
+    onKeyUp: re,
+    onKeyDown: te,
+    onKeyPress: ae,
     defaultValue: $,
     value: N,
     onFocus: A,
-    onBlur: k,
-    onClick: ae,
+    onBlur: C,
+    onClick: ie,
     helper: e,
     input: a,
-    name: ie,
-    isTextArea: le,
-    startSlot: ne,
-    endSlot: se,
-    ...oe
-  } = Q(I) || {}, { getLabel: L } = Ce(), T = y.useRef(null), E = y.useRef(null), [de, O] = y.useState(N ?? $ ?? ""), P = N ?? de, f = !!(R && P && !F), m = (M = Ae) == null ? void 0 : M(), ce = y.useId(), fe = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? ce;
+    name: le,
+    isTextArea: ne,
+    startSlot: se,
+    endSlot: oe,
+    ...de
+  } = Q(I) || {}, { getLabel: L } = Se(), O = y.useRef(null), T = y.useRef(null), [ce, E] = y.useState(N ?? $ ?? ""), P = N ?? ce, c = !!(R && P && !F), m = (M = Ce) == null ? void 0 : M(), fe = y.useId(), me = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? fe;
   y.useImperativeHandle(J, () => ({
     get input() {
-      return E.current;
+      return T.current;
     },
     get inner() {
-      return T.current;
+      return O.current;
     }
   }));
-  const V = b(() => Array.isArray(e) ? c || e.some((r) => r.type === "error") : c || (e == null ? void 0 : e.type) === "error", [c, e]), me = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !c && e.every((r) => r.type === "valid") : !c && e.type === "valid", [c, e]), ue = s === "large" ? "default" : s, h = N !== void 0, pe = B(
-    (r) => {
-      h || O(r), o == null || o(r);
+  const V = b(() => Array.isArray(e) ? f || e.some((t) => t.type === "error") : f || (e == null ? void 0 : e.type) === "error", [f, e]), ue = b(() => !e || Array.isArray(e) && e.length === 0 ? !1 : Array.isArray(e) ? !f && e.every((t) => t.type === "valid") : !f && e.type === "valid", [f, e]), pe = s === "large" ? "default" : s, h = N !== void 0, ye = w(
+    (t) => {
+      h || E(t), o == null || o(t);
     },
     [h, o]
-  ), j = B(() => {
-    h || O(""), o == null || o(""), x == null || x();
-  }, [h, o, x]), H = B(() => {
+  ), j = w(() => {
+    h || E(""), o == null || o(""), v == null || v();
+  }, [h, o, v]), H = w(() => {
     if (!i) return null;
-    const C = {
-      size: s === "large" ? 24 : s === "small" ? !!v ? 18 : 16 : 18,
-      className: t["tedi-textfield__icon"]
-    }, q = typeof i == "string" ? { ...C, name: i } : { ...C, ...i, className: _(C.className, i.className) };
-    return v ? /* @__PURE__ */ n(
+    const k = {
+      size: s === "large" ? 24 : s === "small" ? !!x ? 18 : 16 : 18,
+      className: r["tedi-textfield__icon"]
+    }, q = typeof i == "string" ? { ...k, name: i } : { ...k, ...i, className: _(k.className, i.className) };
+    return x ? /* @__PURE__ */ n(
       "button",
       {
         type: "button",
         ...p,
-        className: _(t["tedi-textfield__icon-wrapper"], p == null ? void 0 : p.className),
-        onClick: d ? void 0 : v,
+        className: _(r["tedi-textfield__icon-wrapper"], p == null ? void 0 : p.className),
+        onClick: d ? void 0 : x,
         disabled: d,
         children: /* @__PURE__ */ n(D, { ...q })
       }
-    ) : /* @__PURE__ */ n("div", { className: t["tedi-textfield__icon-wrapper"], "aria-hidden": "true", children: /* @__PURE__ */ n(D, { ...q }) });
-  }, [i, s, v, p, d]), K = b(() => f ? /* @__PURE__ */ n(
-    be,
+    ) : /* @__PURE__ */ n("div", { className: r["tedi-textfield__icon-wrapper"], "aria-hidden": "true", children: /* @__PURE__ */ n(D, { ...q }) });
+  }, [i, s, x, p, d]), K = b(() => c ? /* @__PURE__ */ n(
+    Ie,
     {
-      iconSize: Se[s === "large" ? "large" : "default"],
+      iconSize: we[s === "large" ? "large" : "default"],
       onClick: d ? void 0 : j,
       disabled: d,
       title: L("clear"),
-      className: t["tedi-textfield__clear-button"]
+      className: r["tedi-textfield__clear-button"]
     }
-  ) : null, [f, s, d, j, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
+  ) : null, [c, s, d, j, L]), xe = b(() => !c && !i ? null : /* @__PURE__ */ S("div", { className: r["tedi-textfield__right-area"], children: [
     K,
-    f && i && /* @__PURE__ */ n(Ie, { color: "primary", axis: "vertical", className: t["tedi-textfield__separator"] }),
+    c && i && /* @__PURE__ */ n(ge, { color: "primary", axis: "vertical", className: r["tedi-textfield__separator"] }),
     i && H()
-  ] }), [f, i, K, H]), ve = /* @__PURE__ */ n(
-    ge,
+  ] }), [c, i, K, H]), ve = /* @__PURE__ */ n(
+    Ne,
     {
       ...a,
       id: u,
-      name: ie,
+      name: le,
       value: P,
       defaultValue: $,
-      onChange: pe,
-      onChangeEvent: G,
+      onChange: ye,
+      onChangeEvent: ee,
       disabled: d,
       readOnly: F || (a == null ? void 0 : a.readOnly),
-      required: w,
+      required: B,
       invalid: V,
       placeholder: Y,
-      className: _(t["tedi-textfield__input"], X, {
-        [t["tedi-textfield__input--hidden-arrows"]]: Z
+      className: _(r["tedi-textfield__input"], X, {
+        [r["tedi-textfield__input--hidden-arrows"]]: Z
       }),
-      onFocus: (r) => {
+      onFocus: (t) => {
         var l;
-        (l = a == null ? void 0 : a.onFocus) == null || l.call(a, r), A == null || A(r);
+        (l = a == null ? void 0 : a.onFocus) == null || l.call(a, t), A == null || A(t);
       },
-      onBlur: (r) => {
+      onBlur: (t) => {
         var l;
-        (l = a == null ? void 0 : a.onBlur) == null || l.call(a, r), k == null || k(r);
+        (l = a == null ? void 0 : a.onBlur) == null || l.call(a, t), C == null || C(t);
       },
-      isTextArea: le,
-      "aria-describedby": !e || Array.isArray(e) && e.length === 0 ? void 0 : Array.isArray(e) ? e.map((r, l) => `${u}-helper-${l}`).join(" ") : `${u}-helper`,
+      isTextArea: ne,
+      "aria-describedby": !e || Array.isArray(e) && e.length === 0 ? void 0 : Array.isArray(e) ? e.map((t, l) => `${u}-helper-${l}`).join(" ") : `${u}-helper`,
       "aria-label": z && typeof g == "string" ? g : void 0,
-      ref: E
+      ref: T
     }
-  ), xe = _(
-    t["tedi-textfield"],
-    { [t[`tedi-textfield--${s}`]]: s },
-    { [t["tedi-textfield--with-icon"]]: i },
-    { [t["tedi-textfield--invalid"]]: V },
-    { [t["tedi-textfield--valid"]]: me },
-    { [t["tedi-textfield--clearable"]]: f },
+  ), he = _(
+    r["tedi-textfield"],
+    { [r[`tedi-textfield--${s}`]]: s },
+    { [r["tedi-textfield--with-icon"]]: i },
+    { [r["tedi-textfield--invalid"]]: V },
+    { [r["tedi-textfield--valid"]]: ue },
+    { [r["tedi-textfield--clearable"]]: c },
+    { [r["tedi-textfield--clear-on-interaction"]]: c && G },
     W
-  ), he = () => !e || Array.isArray(e) && e.length === 0 ? null : /* @__PURE__ */ n("div", { className: t["tedi-textfield__feedback-wrapper"], children: Array.isArray(e) ? e.map((r, l) => /* @__PURE__ */ n(U, { ...r, id: `${u}-helper-${l}` }, l)) : /* @__PURE__ */ n(U, { ...e, id: `${u}-helper` }) });
-  return /* @__PURE__ */ S("div", { "data-name": "textfield", ...oe, className: xe, children: [
-    !fe && /* @__PURE__ */ n(Ne, { id: u, label: g, required: w, hideLabel: z, size: ue }),
+  ), _e = () => !e || Array.isArray(e) && e.length === 0 ? null : /* @__PURE__ */ n("div", { className: r["tedi-textfield__feedback-wrapper"], children: Array.isArray(e) ? e.map((t, l) => /* @__PURE__ */ n(U, { ...t, id: `${u}-helper-${l}` }, l)) : /* @__PURE__ */ n(U, { ...e, id: `${u}-helper` }) });
+  return /* @__PURE__ */ S("div", { "data-name": "textfield", ...de, className: he, children: [
+    !me && /* @__PURE__ */ n(Ae, { id: u, label: g, required: B, hideLabel: z, size: pe }),
     /* @__PURE__ */ S(
       "div",
       {
-        className: t["tedi-textfield__inner"],
-        onKeyDown: re,
-        onKeyUp: ee,
-        onKeyPress: te,
-        onClick: ae,
-        ref: T,
+        className: r["tedi-textfield__inner"],
+        onKeyDown: te,
+        onKeyUp: re,
+        onKeyPress: ae,
+        onClick: ie,
+        ref: O,
         children: [
-          ne,
-          ve,
           se,
-          (R || i) && ye
+          ve,
+          oe,
+          (R || i) && xe
         ]
       }
     ),
-    he()
+    _e()
   ] });
 });
 Be.displayName = "TextField";

package/src/tedi/components/form/textfield/textfield.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield--clear-on-interaction":"tedi-textfield--clear-on-interaction-155ed896","tedi-textfield__clear-button":"tedi-textfield__clear-button-edbbffef","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14"};exports.default=e;

package/src/tedi/components/form/textfield/textfield.module.scss.es.js

@@ -9,6 +9,8 @@ const e = {
   "tedi-textfield--small": "tedi-textfield--small-4ffcc517",
   "tedi-textfield--large": "tedi-textfield--large-0e4d788c",
   "tedi-textfield__right-area": "tedi-textfield__right-area-6ac81c6b",
+  "tedi-textfield--clear-on-interaction": "tedi-textfield--clear-on-interaction-155ed896",
+  "tedi-textfield__clear-button": "tedi-textfield__clear-button-edbbffef",
   "tedi-textfield__icon-wrapper": "tedi-textfield__icon-wrapper-4935814e",
   "tedi-textfield--inline": "tedi-textfield--inline-7ed55c4e",
   "tedi-textfield__icon": "tedi-textfield__icon-05d4adc8",

package/src/tedi/helpers/hooks/use-file-upload.cjs.js

@@ -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;
+"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

@@ -76,9 +76,17 @@ export interface UseFileUploadProps {
      */
     showRestrictions?: boolean;
 }
+/**
+ * Formats a byte count into a readable size (`512 KB`, `2.5 MB`, …). Uses 1024-based
+ * units to stay consistent with the size validation (`maxSize * 1024 ** 2`), and rolls
+ * sub-1-unit values down so `0.5 MB` reads as `512 KB` rather than `0.5MB` (#888).
+ */
+export declare const formatFileSize: (bytes: number) => string;
 export declare const useFileUpload: (props: UseFileUploadProps) => {
     innerFiles: FileUploadFile[];
     uploadErrorHelper: FeedbackTextProps | undefined;
+    errorHelper: FeedbackTextProps | undefined;
+    restrictionsHint: FeedbackTextProps | undefined;
     onFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onFileRemove: (file: FileUploadFile) => void;
     handleClear: () => FileUploadFile[];

package/src/tedi/helpers/hooks/use-file-upload.es.js

@@ -1,100 +1,123 @@
-import c, { useEffect as U } from "react";
-import { useLabels as B } from "../../providers/label-provider/use-labels.es.js";
-const k = ({ 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`
+import p, { useEffect as b } from "react";
+import { useLabels as G } from "../../providers/label-provider/use-labels.es.js";
+const K = (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]}`;
+}, Y = ({ accept: s, maxSize: n }, c) => {
+  if (!s && !n) return;
+  const d = [
+    s && `${c("file-upload.accept")} ${s.replaceAll(",", ", ")}`,
+    n && `${c("file-upload.max-size")} ${K(n * 1024 ** 2)}`
   ].filter(Boolean).join(". ");
-  return p.length ? { text: p } : void 0;
-}, Y = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, q = 100, Q = (F) => {
-  const { getLabel: o } = B(), {
-    accept: f,
-    maxSize: p,
-    multiple: H = !1,
-    validateIndividually: S = !1,
-    defaultFiles: A = [],
-    onChange: l,
-    onDelete: m,
-    files: $,
-    announcementTimeout: j = 5e3,
-    showRestrictions: C = !0
-  } = 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();
-  U(() => () => {
-    y.current = !1, v.current && clearTimeout(v.current), T.current && clearTimeout(T.current);
+  return d.length ? { text: d } : void 0;
+}, 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) => {
+  const { getLabel: n } = G(), {
+    accept: c,
+    maxSize: d,
+    multiple: B = !1,
+    validateIndividually: I = !1,
+    defaultFiles: L = [],
+    onChange: f,
+    onDelete: F,
+    files: H,
+    announcementTimeout: V = 5e3,
+    showRestrictions: N = !0
+  } = 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();
+  b(() => () => {
+    w.current = !1, v.current && clearTimeout(v.current), T.current && clearTimeout(T.current);
   }, []);
-  const E = c.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("");
-        }, j));
-      }, q));
+  const M = p.useCallback(
+    (t) => {
+      !t || !w.current || (S(""), v.current && clearTimeout(v.current), T.current && clearTimeout(T.current), v.current = setTimeout(() => {
+        w.current && (S(t), T.current = setTimeout(() => {
+          w.current && S("");
+        }, V));
+      }, D));
     },
-    [j]
-  ), a = c.useRef(null), z = (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);
-  }, I = (e) => {
-    const s = e.reduce(
-      (n, { type: r, file: i }) => (n[r].push(i.name), n),
+    [V]
+  ), h = 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);
+  }, W = (t) => {
+    const l = t.reduce(
+      (r, { type: i, file: m }) => (r[i].push(m.name), r),
       { 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);
+    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: _,
-    onFileChange: (e) => {
-      if (e.target.files) {
-        const s = Array.from(e.target.files), n = [], r = s.map((t) => {
-          const x = z(t), M = !p || t.size <= p * 1024 ** 2;
-          x || n.push({ type: "extension", file: t }), M || n.push({ type: "size", file: t });
-          const O = new File([t], t.name, {
-            type: t.type,
-            lastModified: t.lastModified
+    innerFiles: a,
+    uploadErrorHelper: O,
+    errorHelper: C,
+    restrictionsHint: y,
+    onFileChange: (t) => {
+      if (t.target.files) {
+        const l = Array.from(t.target.files), r = [], i = l.map((e) => {
+          const u = k(e), j = !d || e.size <= d * 1024 ** 2;
+          u || r.push({ type: "extension", file: e }), j || r.push({ type: "size", file: e });
+          const $ = new File([e], e.name, {
+            type: e.type,
+            lastModified: e.lastModified
           });
-          return Object.assign(O, {
-            id: Y(),
+          return Object.assign($, {
+            id: q(),
             isLoading: !1,
-            isValid: x && M
+            isValid: u && j
           });
-        });
-        let i;
-        if (!H)
-          i = r.length > 0 && r[0].isValid ? [r[0]] : u;
-        else if (S)
-          i = [...u, ...r];
-        else {
-          const t = r.filter((x) => x.isValid);
-          i = t.length > 0 ? [...u, ...t] : u;
+        }), m = (e) => e.filter(
+          (u, j) => !a.some(($) => A($, u)) && e.findIndex(($) => A($, u)) === j
+        ), o = B ? Array.from(
+          new Set(
+            i.filter((e) => a.some((u) => A(u, e))).map((e) => e.name ?? "")
+          )
+        ) : [];
+        let g;
+        if (!B)
+          g = i.length > 0 && i[0].isValid ? [i[0]] : a;
+        else if (I) {
+          const e = m(i);
+          g = e.length > 0 ? [...a, ...e] : a;
+        } else {
+          const e = m(i.filter((u) => u.isValid));
+          g = e.length > 0 ? [...a, ...e] : a;
         }
-        const d = i.filter((t) => !u.includes(t)).length;
-        if (d > 0 && !h && R(i), l == null || l(i), n.length) {
-          const t = I(n);
-          g({ type: "error", text: t }), E(t);
-        } else
-          g(void 0), d > 0 && E(o("file-upload.success-added", d.toString()));
-        e.target.value = "", a.current && (a.current.value = "");
+        const z = g.filter((e) => !a.includes(e)).length;
+        if (z > 0 && !x && R(g), f == null || f(g), r.length) {
+          const e = W(r);
+          E({ type: "error", text: e }), M(e);
+        } else {
+          E(void 0);
+          const e = [
+            z > 0 && n("file-upload.success-added", z.toString()),
+            o.length && n("file-upload.duplicates-skipped", o.map((u) => `'${u}'`).join(", "))
+          ].filter(Boolean);
+          e.length && M(e.join(". "));
+        }
+        t.target.value = "", h.current && (h.current.value = "");
       }
     },
-    onFileRemove: (e) => {
-      const s = u.filter((n) => n !== e);
-      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 = "");
+    onFileRemove: (t) => {
+      const l = a.filter((r) => r !== t);
+      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 = "");
     },
     handleClear: () => {
-      const e = [...u];
-      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;
+      const t = [...a];
+      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;
     },
-    fileInputRef: a,
-    announcement: b
+    fileInputRef: h,
+    announcement: U
   };
 };
 export {
-  Q as useFileUpload
+  K as formatFileSize,
+  ee as useFileUpload
 };