@tedi-design-system/react 18.1.1-rc.1 → 18.2.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.1.1-rc.1",
+  "version": "18.2.0-rc.1",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/form/file-upload/file-upload.cjs.js

@@ -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"),oe=require("../../base/typography/text/text.cjs.js"),S=require("../../buttons/button/button.cjs.js"),re=require("../../buttons/closing-button/closing-button.cjs.js"),ce=require("../form-label/form-label.cjs.js"),ue=require("../../misc/separator/separator.cjs.js"),fe=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"),pe=require("../../../providers/label-provider/use-labels.cjs.js"),M=require("../../../helpers/hooks/use-breakpoint.cjs.js"),me=require("../../layout/grid/row.cjs.js"),O=require("../../layout/grid/col.cjs.js"),A=P=>{var U;const{getLabel:n}=pe.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,size:u="default",helper:i,...Y}=P,{innerFiles:_,uploadErrorHelper:t,onFileChange:Z,onFileRemove:E,handleClear:G,announcement:ee}=de.useFileUpload({accept:y,maxSize:Q,multiple:F,validateIndividually:X,defaultFiles:H,onChange:m,onDelete:J,files:c}),le=M.default(),ae=p.useId(),d=(U=g.useOptionalInputGroup)==null?void 0:U.call(g),te=d==null?void 0:d.hasExternalLabel,f=V??(d==null?void 0:d.inputId)??ae,q=p.useRef(null),N=p.useRef(null),ie=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,o=p.useMemo(()=>c&&m?c:_,[c,_,m]),R=()=>{var l;return(l=N.current)==null?void 0:l.focus()},se=l=>{E(l),R()},I=()=>{G(),R()},ne=(l,r)=>{const w=l.isValid===!1;return e.jsx("li",{children:e.jsxs(fe.Tag,{role:"presentation",color:w?"danger":"primary",onClose:!l.isLoading&&!s&&!x?()=>se(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(o.length>1)return e.jsx("ul",{className:a.default["tedi-file-upload__items"],children:o.map((l,r)=>ne(l,r))});if(o.length===1){const l=o[0],r=l.isValid===!1;return e.jsxs(oe.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:!te&&v&&e.jsx(ce.FormLabel,{id:f,label:v??"",...Y,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:ee}),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(me.Row,{children:[e.jsx(O.Col,{className:"display-flex",children:T()}),e.jsx(O.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:ie,children:[e.jsx("input",{ref:q,id:f,type:"file",name:$,accept:y,onChange:Z,multiple:F,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":k}),K&&o.length>0&&!s&&e.jsxs(e.Fragment,{children:[M.isBreakpointBelow(le,"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(re.ClosingButton,{onClick:I,iconSize:18,title:n("clear")}),e.jsx(ue.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;
+"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;

package/src/tedi/components/form/file-upload/file-upload.d.ts

@@ -79,6 +79,13 @@ export interface FileUploadProps extends Omit<FormLabelProps, 'id' | 'label'> {
      * If `true`, validates each file separately instead of rejecting all at once.
      */
     validateIndividually?: boolean;
+    /**
+     * Whether to show the auto-generated restrictions hint (allowed types / max size)
+     * below the field. Turn it off when the same info is shown elsewhere to avoid a
+     * duplicate — rejection error messages still render.
+     * @default true
+     */
+    showRestrictions?: boolean;
     /**
      * Determines the visual size of the file upload field. Defaults to `"default"`.
      */

package/src/tedi/components/form/file-upload/file-upload.es.js

@@ -2,22 +2,22 @@ import { jsxs as t, Fragment as z, jsx as i } from "react/jsx-runtime";
 import y from "../../../../../external/classnames/index.es.js";
 import f from "react";
 import { useFileUpload as ne } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Text as se } from "../../base/typography/text/text.es.js";
+import { Text as re } from "../../base/typography/text/text.es.js";
 import { Button as S } from "../../buttons/button/button.es.js";
-import { ClosingButton as re } from "../../buttons/closing-button/closing-button.es.js";
-import { FormLabel as de } from "../form-label/form-label.es.js";
-import { Separator as ce } from "../../misc/separator/separator.es.js";
-import { Tag as me } from "../../tags/tag/tag.es.js";
+import { ClosingButton as de } from "../../buttons/closing-button/closing-button.es.js";
+import { FormLabel as ce } from "../form-label/form-label.es.js";
+import { Separator as me } from "../../misc/separator/separator.es.js";
+import { Tag as pe } from "../../tags/tag/tag.es.js";
 import { FeedbackText as A } from "../feedback-text/feedback-text.es.js";
-import { useOptionalInputGroup as pe } from "../input-group/input-group.es.js";
+import { useOptionalInputGroup as ue } from "../input-group/input-group.es.js";
 import l from "./file-upload.module.scss.es.js";
-import { useLabels as ue } from "../../../providers/label-provider/use-labels.es.js";
-import fe, { isBreakpointBelow as he } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { Row as ve } from "../../layout/grid/row.es.js";
+import { useLabels as fe } from "../../../providers/label-provider/use-labels.es.js";
+import he, { isBreakpointBelow as ve } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { Row as be } from "../../layout/grid/row.es.js";
 import { Col as M } from "../../layout/grid/col.es.js";
-const be = (O) => {
+const _e = (O) => {
   var $;
-  const { getLabel: s } = ue(), {
+  const { getLabel: n } = fe(), {
     id: V,
     name: D,
     label: g,
@@ -31,13 +31,14 @@ const be = (O) => {
     hasClearButton: J = !0,
     files: m,
     readOnly: v,
-    disabled: n = !1,
+    disabled: s = !1,
     maxSize: K,
     validateIndividually: Q = !1,
+    showRestrictions: X,
     size: p = "default",
     helper: o,
-    ...X
-  } = O, { innerFiles: B, uploadErrorHelper: a, onFileChange: Y, onFileRemove: Z, handleClear: E, announcement: G } = ne({
+    ...Y
+  } = O, { innerFiles: B, uploadErrorHelper: a, onFileChange: Z, onFileRemove: E, handleClear: G, announcement: ee } = ne({
     accept: F,
     maxSize: K,
     multiple: N,
@@ -45,29 +46,30 @@ const be = (O) => {
     defaultFiles: q,
     onChange: h,
     onDelete: H,
-    files: m
-  }), ee = fe(), ie = f.useId(), r = ($ = pe) == null ? void 0 : $(), le = r == null ? void 0 : r.hasExternalLabel, u = V ?? (r == null ? void 0 : r.inputId) ?? ie, C = f.useRef(null), L = f.useRef(null), ae = y(l["tedi-file-upload"], { [l["tedi-file-upload--disabled"]]: n }, P), x = (a == null ? void 0 : a.type) === "error", b = o ?? (x ? void 0 : a), _ = x ? a : void 0, k = b ? (o == null ? void 0 : o.id) ?? `${u}-helper` : void 0, I = _ ? `${u}-error` : void 0, R = [k, I].filter(Boolean).join(" ") || void 0, d = f.useMemo(() => m && h ? m : B, [m, B, h]), w = () => {
+    files: m,
+    showRestrictions: X
+  }), 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 = () => {
     var e;
     return (e = L.current) == null ? void 0 : e.focus();
-  }, oe = (e) => {
-    Z(e), w();
+  }, te = (e) => {
+    E(e), w();
   }, T = () => {
-    E(), w();
-  }, te = (e, c) => {
+    G(), w();
+  }, se = (e, c) => {
     const j = e.isValid === !1;
     return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ t(
-      me,
+      pe,
       {
         role: "presentation",
         color: j ? "danger" : "primary",
-        onClose: !e.isLoading && !n && !v ? () => oe(e) : void 0,
+        onClose: !e.isLoading && !s && !v ? () => te(e) : void 0,
         isLoading: e.isLoading,
-        closeButtonProps: { title: `${s("remove")} ${e.name}` },
+        closeButtonProps: { title: `${n("remove")} ${e.name}` },
         children: [
           e.name,
           j && /* @__PURE__ */ t("span", { className: "sr-only", children: [
             " (",
-            s("file-upload.failed"),
+            n("file-upload.failed"),
             ")"
           ] })
         ]
@@ -75,14 +77,14 @@ const be = (O) => {
     ) }, e.id ?? c);
   }, U = () => {
     if (d.length > 1)
-      return /* @__PURE__ */ i("ul", { className: l["tedi-file-upload__items"], children: d.map((e, c) => te(e, c)) });
+      return /* @__PURE__ */ i("ul", { className: l["tedi-file-upload__items"], children: d.map((e, c) => se(e, c)) });
     if (d.length === 1) {
       const e = d[0], c = e.isValid === !1;
-      return /* @__PURE__ */ t(se, { className: y(l["tedi-file-upload__items"], l["tedi-file-upload__items--truncate"]), children: [
+      return /* @__PURE__ */ t(re, { className: y(l["tedi-file-upload__items"], l["tedi-file-upload__items--truncate"]), children: [
         e.name,
         c && /* @__PURE__ */ t("span", { className: "sr-only", children: [
           " (",
-          s("file-upload.failed"),
+          n("file-upload.failed"),
           ")"
         ] })
       ] });
@@ -90,34 +92,34 @@ const be = (O) => {
     return null;
   };
   return /* @__PURE__ */ t(z, { children: [
-    /* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: !le && g && /* @__PURE__ */ i(
-      de,
+    /* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: !ae && g && /* @__PURE__ */ i(
+      ce,
       {
         id: u,
         label: g ?? "",
-        ...X,
+        ...Y,
         renderWithoutLabel: v,
         className: l["tedi-file-upload__label"],
         size: p
       }
     ) }),
-    /* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: G }),
+    /* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: ee }),
     v ? U() : /* @__PURE__ */ i(
       "div",
       {
         className: y(
           l["tedi-file-upload__container"],
           {
-            [l["tedi-file-upload--disabled"]]: n,
+            [l["tedi-file-upload--disabled"]]: s,
             [l["tedi-file-upload--error"]]: ((a == null ? void 0 : a.type) || (o == null ? void 0 : o.type)) === "error",
             [l["tedi-file-upload--valid"]]: ((a == null ? void 0 : a.type) || (o == null ? void 0 : o.type)) === "valid"
           },
           { [l[`tedi-file-upload__container--${p}`]]: p },
           W
         ),
-        children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ t(ve, { children: [
+        children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ t(be, { children: [
           /* @__PURE__ */ i(M, { className: "display-flex", children: U() }),
-          /* @__PURE__ */ i(M, { xs: 12, md: "auto", children: /* @__PURE__ */ t("div", { className: ae, children: [
+          /* @__PURE__ */ i(M, { xs: 12, md: "auto", children: /* @__PURE__ */ t("div", { className: oe, children: [
             /* @__PURE__ */ i(
               "input",
               {
@@ -126,26 +128,26 @@ const be = (O) => {
                 type: "file",
                 name: D,
                 accept: F,
-                onChange: Y,
+                onChange: Z,
                 multiple: N,
-                disabled: n,
+                disabled: s,
                 "aria-invalid": !!a && a.type === "error",
-                "aria-describedby": R
+                "aria-describedby": I
               }
             ),
-            J && d.length > 0 && !n && /* @__PURE__ */ t(z, { children: [
-              he(ee, "md") ? /* @__PURE__ */ i(
+            J && d.length > 0 && !s && /* @__PURE__ */ t(z, { children: [
+              ve(ie, "md") ? /* @__PURE__ */ i(
                 S,
                 {
                   visualType: "neutral",
                   iconLeft: "close",
-                  disabled: n,
+                  disabled: s,
                   onClick: T,
                   className: l["tedi-file-upload__button"],
-                  children: s("clear")
+                  children: n("clear")
                 }
-              ) : /* @__PURE__ */ i(re, { onClick: T, iconSize: 18, title: s("clear") }),
-              /* @__PURE__ */ i(ce, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
+              ) : /* @__PURE__ */ i(de, { onClick: T, iconSize: 18, title: n("clear") }),
+              /* @__PURE__ */ i(me, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
             ] }),
             /* @__PURE__ */ i(
               S,
@@ -153,26 +155,26 @@ const be = (O) => {
                 ref: L,
                 visualType: "neutral",
                 iconLeft: "file_upload",
-                disabled: n,
+                disabled: s,
                 onClick: () => {
                   var e;
                   return (e = C.current) == null ? void 0 : e.click();
                 },
                 className: l["tedi-file-upload__button"],
                 size: p,
-                "aria-describedby": R,
-                children: s("file-upload.add")
+                "aria-describedby": I,
+                children: n("file-upload.add")
               }
             )
           ] }) })
         ] }) })
       }
     ),
-    b && /* @__PURE__ */ i(A, { ...b, id: k }),
-    _ && /* @__PURE__ */ i(A, { ..._, id: I })
+    b && /* @__PURE__ */ i(A, { ...b, id: R }),
+    _ && /* @__PURE__ */ i(A, { ..._, id: k })
   ] });
 };
-be.displayName = "FileUpload";
+_e.displayName = "FileUpload";
 export {
-  be as FileUpload
+  _e as FileUpload
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),z=require("../../providers/label-provider/use-labels.cjs.js"),j=({accept:F,maxSize:s},o)=>{if(!F&&!s)return;const u=[F&&`${o("file-upload.accept")} ${F.replaceAll(",",", ")}`,s&&`${o("file-upload.max-size")} ${s}MB`].filter(Boolean).join(". ");return u.length?{text:u}:void 0},I=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,O=100,_=F=>{const{getLabel:s}=z.useLabels(),{accept:o,maxSize:u,multiple:w=!1,validateIndividually:b=!1,defaultFiles:L=[],onChange:c,onDelete:f,files:R,announcementTimeout:S=5e3}=F,h=R!==void 0,[A,x]=a.useState(L),p=h?R:A,[C,y]=a.useState(j({accept:o,maxSize:u},s)),[H,M]=a.useState(""),v=a.useRef(!0),g=a.useRef(),T=a.useRef();a.useEffect(()=>()=>{v.current=!1,g.current&&clearTimeout(g.current),T.current&&clearTimeout(T.current)},[]);const E=a.useCallback(t=>{!t||!v.current||(M(""),g.current&&clearTimeout(g.current),T.current&&clearTimeout(T.current),g.current=setTimeout(()=>{v.current&&(M(t),T.current=setTimeout(()=>{v.current&&M("")},S))},O))},[S]),d=a.useRef(null),N=t=>{var n;if(!o)return!0;const l=o.split(",").map(e=>e.trim().toLowerCase()),r=t.name.includes(".")?`.${(n=t.name.split(".").pop())==null?void 0:n.toLowerCase()}`:"",i=t.type.toLowerCase();return l.includes(r)||l.includes(i)},U=t=>{const l=t.reduce((r,{type:i,file:n})=>(r[i].push(n.name),r),{extension:[],size:[]});return Object.entries(l).filter(([r,i])=>i.length).map(([r,i])=>{const n=i.map(e=>`'${e}'`).join(", ");return s(`file-upload.${r}-rejected`,n)}).join(". ")};return{innerFiles:p,uploadErrorHelper:C,onFileChange:t=>{if(t.target.files){const l=Array.from(t.target.files),r=[],i=l.map(e=>{const m=N(e),$=!u||e.size<=u*1024**2;m||r.push({type:"extension",file:e}),$||r.push({type:"size",file:e});const V=new File([e],e.name,{type:e.type,lastModified:e.lastModified});return Object.assign(V,{id:I(),isLoading:!1,isValid:m&&$})});let n=[];if(!w&&i.length>0)i[0].isValid&&(n=[i[0]]);else if(b)n=[...p,...i];else{const e=i.filter(m=>m.isValid);e.length>0&&(n=[...p,...e])}if(n.length>0&&(h||x(n),c==null||c(n)),r.length){const e=U(r);y({type:"error",text:e}),E(e)}else if(y(j({accept:o,maxSize:u},s)),n.length>0){const e=n.filter(m=>!p.includes(m)).length;E(s("file-upload.success-added",e.toString()))}t.target.value="",d.current&&(d.current.value="")}},onFileRemove:t=>{const l=p.filter(r=>r!==t);h||x(l),f==null||f(t),c==null||c(l),l.length===0&&y(j({accept:o,maxSize:u},s)),E(s("file-upload.removed",t.name??"")),d.current&&(d.current.value="")},handleClear:()=>{const t=[...p];return t.forEach(l=>f==null?void 0:f(l)),h||x([]),c==null||c([]),y(j({accept:o,maxSize:u},s)),E(s("file-upload.cleared")),d.current&&(d.current.value=""),t},fileInputRef:d,announcement:H}};exports.useFileUpload=_;
+"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;

package/src/tedi/helpers/hooks/use-file-upload.d.ts

@@ -67,6 +67,14 @@ export interface UseFileUploadProps {
      * @default 5000
      */
     announcementTimeout?: number;
+    /**
+     * Whether to show the auto-generated restrictions hint (allowed types / max size)
+     * below the field. Turn it off when the same information is presented elsewhere
+     * (e.g. a `tooltip`) to avoid a visible duplicate — rejection error messages are
+     * unaffected and still render.
+     * @default true
+     */
+    showRestrictions?: boolean;
 }
 export declare const useFileUpload: (props: UseFileUploadProps) => {
     innerFiles: FileUploadFile[];

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

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