@tedi-design-system/react 18.1.0-rc.2 → 18.1.0-rc.20

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),L=require("../../../../../external/classnames/index.cjs.js"),N=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),D=require("../../../helpers/hooks/use-file-upload.cjs.js"),$=require("../../base/icon/icon.cjs.js"),I=require("../../buttons/button/button.cjs.js"),S=require("../../misc/attachment/attachment.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),n=require("./file-dropzone.module.scss.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),p=require("../../content/list/list.cjs.js"),P=s=>{const{getLabel:d}=k.useLabels(),{label:x=d("file-dropzone.label"),className:b,disabled:o=!1,helper:i,id:m,attachmentProps:c,...z}=s,{innerFiles:r,uploadErrorHelper:a,onFileChange:g,onFileRemove:j}=D.useFileUpload(s),{getRootProps:v,getInputProps:h,isDragActive:y}=N.useDropzone({disabled:o,accept:s.accept?{"application/*":[s.accept]}:void 0,multiple:s.multiple,maxSize:s.maxSize?s.maxSize*1024**2:void 0,onDrop:t=>{if(o)return;g({target:{files:t}})}}),F=L.default(n.default["tedi-file-dropzone"],{[n.default["tedi-file-dropzone--disabled"]]:o},{[n.default["tedi-file-dropzone--invalid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="error"},{[n.default["tedi-file-dropzone--valid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="valid"},{[n.default["tedi-file-dropzone--drop-over"]]:y},b),u=i?(i==null?void 0:i.id)??`${m}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...v({tabIndex:o?-1:0,"aria-disabled":o,"aria-describedby":u}),className:F,children:[e.jsx("input",{...h(),disabled:o}),e.jsx("div",{className:n.default["tedi-file-dropzone__label-wrapper"],children:e.jsx(T.FormLabel,{...z,id:m,label:e.jsxs(e.Fragment,{children:[e.jsx($.Icon,{color:o?"tertiary":"secondary",size:24,name:"attach_file",display:"inline",className:n.default["tedi-file-dropzone__label-icon"]}),x]}),className:n.default["tedi-file-dropzone__label"]})})]}),i?e.jsx(f.FeedbackText,{...i,id:u}):a?e.jsx(f.FeedbackText,{...a,id:u}):null,!!r.length&&e.jsx(p.List,{className:n.default["tedi-file-dropzone__file-list"],style:"none","aria-label":d("file-dropzone.selected-files"),children:r.map(t=>{const l=typeof c=="function"?c(t):c,{actions:q,..._}=l??{};return e.jsx(p.List.Item,{className:n.default["tedi-file-dropzone__file-list-item"],children:e.jsx(S.Attachment,{..._,name:t.name??"",isValid:t.isValid??(l==null?void 0:l.isValid),isLoading:t.isLoading??(l==null?void 0:l.isLoading),actions:e.jsxs(e.Fragment,{children:[q,e.jsx(I.Button,{visualType:"neutral",icon:"delete",onClick:()=>j(t),children:`${d("remove")} ${t.name??""}`})]})})},t.id??`${t.name??"file"}-${t.size??""}-${t.lastModified??""}`)})}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:r.length===0?d("file-dropzone.no-file"):d("file-dropzone.files-selected",r.length)})]})};exports.FileDropzone=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),R=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),P=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),T=require("../../../helpers/hooks/use-file-upload.cjs.js"),V=require("../../base/icon/icon.cjs.js"),A=require("../../buttons/button/button.cjs.js"),M=require("../../misc/attachment/attachment.cjs.js"),B=require("../feedback-text/feedback-text.cjs.js"),C=require("../form-label/form-label.cjs.js"),n=require("./file-dropzone.module.scss.cjs.js"),O=require("../../../providers/label-provider/use-labels.cjs.js"),b=require("../../content/list/list.cjs.js"),U=l=>{const{getLabel:r}=O.useLabels(),{label:h=r("file-dropzone.label"),className:v,disabled:o=!1,helper:g,id:j,attachmentProps:c,...y}=l,{innerFiles:p,uploadErrorHelper:s,onFileChange:q,onFileRemove:F,announcement:_}=T.useFileUpload(l),L=S.useId(),f=j??L,{getRootProps:N,getInputProps:$,isDragActive:I}=P.useDropzone({disabled:o,accept:l.accept?{"application/*":[l.accept]}:void 0,multiple:l.multiple,maxSize:l.maxSize?l.maxSize*1024**2:void 0,onDrop:(i,a=[])=>{if(o)return;const u=a.filter(m=>m.errors.some(z=>z.code==="file-too-large"||z.code==="file-invalid-type")).map(m=>m.file),d=[...i,...u];if(d.length===0)return;q({target:{files:d}})}}),t=(s==null?void 0:s.type)==="error"?s:g??s,x=t?t.id??`${f}-helper`:void 0,D=R.default(n.default["tedi-file-dropzone"],{[n.default["tedi-file-dropzone--disabled"]]:o},{[n.default["tedi-file-dropzone--invalid"]]:(t==null?void 0:t.type)==="error"},{[n.default["tedi-file-dropzone--valid"]]:(t==null?void 0:t.type)==="valid"},{[n.default["tedi-file-dropzone--drop-over"]]:I},v);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...N({role:"button",tabIndex:o?-1:0,"aria-disabled":o,"aria-describedby":x}),className:D,children:[e.jsx("input",{...$(),disabled:o}),e.jsx("div",{className:n.default["tedi-file-dropzone__label-wrapper"],children:e.jsx(C.FormLabel,{...y,id:f,label:e.jsxs(e.Fragment,{children:[e.jsx(V.Icon,{color:o?"tertiary":"secondary",size:24,name:"attach_file",display:"inline",className:n.default["tedi-file-dropzone__label-icon"]}),h]}),className:n.default["tedi-file-dropzone__label"]})})]}),t&&e.jsx(B.FeedbackText,{...t,id:x}),!!p.length&&e.jsx(b.List,{className:n.default["tedi-file-dropzone__file-list"],style:"none","aria-label":r("file-dropzone.selected-files"),children:p.map(i=>{const a=typeof c=="function"?c(i):c,{actions:u,...d}=a??{};return e.jsxs(b.List.Item,{className:n.default["tedi-file-dropzone__file-list-item"],children:[e.jsx(M.Attachment,{...d,name:i.name??"",isValid:i.isValid??(a==null?void 0:a.isValid),isLoading:i.isLoading??(a==null?void 0:a.isLoading),actions:e.jsxs(e.Fragment,{children:[u,e.jsx(A.Button,{visualType:"neutral",icon:"delete",onClick:()=>F(i),children:`${r("remove")} ${i.name??""}`})]})}),i.isValid===!1&&e.jsx("span",{className:"sr-only",children:`${r("file-dropzone.failed")} ${i.name??""}`})]},i.id??`${i.name??"file"}-${i.size??""}-${i.lastModified??""}`)})}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:_})]})};exports.FileDropzone=U;

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

@@ -1,114 +1,125 @@
-import { jsxs as c, Fragment as f, jsx as t } from "react/jsx-runtime";
-import I from "../../../../../external/classnames/index.es.js";
-import { useDropzone as A } from "../../../../../external/react-dropzone/dist/es/index.es.js";
-import { useFileUpload as P } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Icon as S } from "../../base/icon/icon.es.js";
-import { Button as V } from "../../buttons/button/button.es.js";
-import { Attachment as j } from "../../misc/attachment/attachment.es.js";
-import { FeedbackText as b } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as k } from "../form-label/form-label.es.js";
-import o from "./file-dropzone.module.scss.es.js";
-import { useLabels as B } from "../../../providers/label-provider/use-labels.es.js";
-import { List as v } from "../../content/list/list.es.js";
-const W = (l) => {
-  const { getLabel: s } = B(), {
-    label: h = s("file-dropzone.label"),
-    className: u,
-    disabled: d = !1,
-    helper: e,
-    id: z,
+import { jsxs as s, Fragment as z, jsx as o } from "react/jsx-runtime";
+import P from "../../../../../external/classnames/index.es.js";
+import S from "react";
+import { useDropzone as B } from "../../../../../external/react-dropzone/dist/es/index.es.js";
+import { useFileUpload as C } from "../../../helpers/hooks/use-file-upload.es.js";
+import { Icon as M } from "../../base/icon/icon.es.js";
+import { Button as T } from "../../buttons/button/button.es.js";
+import { Attachment as w } from "../../misc/attachment/attachment.es.js";
+import { FeedbackText as O } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as U } from "../form-label/form-label.es.js";
+import t from "./file-dropzone.module.scss.es.js";
+import { useLabels as q } from "../../../providers/label-provider/use-labels.es.js";
+import { List as g } from "../../content/list/list.es.js";
+const te = (l) => {
+  const { getLabel: d } = q(), {
+    label: y = d("file-dropzone.label"),
+    className: _,
+    disabled: n = !1,
+    helper: N,
+    id: x,
     attachmentProps: m,
-    ...g
-  } = l, { innerFiles: r, uploadErrorHelper: a, onFileChange: y, onFileRemove: _ } = P(l), { getRootProps: N, getInputProps: x, isDragActive: F } = A({
-    disabled: d,
+    ...F
+  } = l, { innerFiles: h, uploadErrorHelper: r, onFileChange: I, onFileRemove: $, announcement: L } = C(l), D = S.useId(), u = x ?? D, { getRootProps: R, getInputProps: V, isDragActive: j } = B({
+    disabled: n,
     accept: l.accept ? { "application/*": [l.accept] } : void 0,
     multiple: l.multiple,
     maxSize: l.maxSize ? l.maxSize * 1024 ** 2 : void 0,
-    onDrop: (i) => {
-      if (d) return;
-      y({
-        target: { files: i }
+    onDrop: (e, a = []) => {
+      if (n) return;
+      const p = a.filter(
+        (f) => f.errors.some((b) => b.code === "file-too-large" || b.code === "file-invalid-type")
+      ).map((f) => f.file), c = [...e, ...p];
+      if (c.length === 0) return;
+      I({
+        target: { files: c }
       });
     }
-  }), L = I(
-    o["tedi-file-dropzone"],
-    { [o["tedi-file-dropzone--disabled"]]: d },
-    { [o["tedi-file-dropzone--invalid"]]: ((a == null ? void 0 : a.type) || (e == null ? void 0 : e.type)) === "error" },
-    { [o["tedi-file-dropzone--valid"]]: ((a == null ? void 0 : a.type) || (e == null ? void 0 : e.type)) === "valid" },
-    { [o["tedi-file-dropzone--drop-over"]]: F },
-    u
-  ), p = e ? (e == null ? void 0 : e.id) ?? `${z}-helper` : void 0;
-  return /* @__PURE__ */ c(f, { children: [
-    /* @__PURE__ */ c(
+  }), i = (r == null ? void 0 : r.type) === "error" ? r : N ?? r, v = i ? i.id ?? `${u}-helper` : void 0, A = P(
+    t["tedi-file-dropzone"],
+    { [t["tedi-file-dropzone--disabled"]]: n },
+    // Drive the visual state from the same `feedback` that is rendered, so the
+    // invalid/valid styling never diverges from the message shown.
+    { [t["tedi-file-dropzone--invalid"]]: (i == null ? void 0 : i.type) === "error" },
+    { [t["tedi-file-dropzone--valid"]]: (i == null ? void 0 : i.type) === "valid" },
+    { [t["tedi-file-dropzone--drop-over"]]: j },
+    _
+  );
+  return /* @__PURE__ */ s(z, { children: [
+    /* @__PURE__ */ s(
       "div",
       {
-        ...N({
-          tabIndex: d ? -1 : 0,
-          "aria-disabled": d,
-          "aria-describedby": p
+        ...R({
+          role: "button",
+          tabIndex: n ? -1 : 0,
+          "aria-disabled": n,
+          "aria-describedby": v
         }),
-        className: L,
+        className: A,
         children: [
-          /* @__PURE__ */ t("input", { ...x(), disabled: d }),
-          /* @__PURE__ */ t("div", { className: o["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ t(
-            k,
+          /* @__PURE__ */ o("input", { ...V(), disabled: n }),
+          /* @__PURE__ */ o("div", { className: t["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ o(
+            U,
             {
-              ...g,
-              id: z,
-              label: /* @__PURE__ */ c(f, { children: [
-                /* @__PURE__ */ t(
-                  S,
+              ...F,
+              id: u,
+              label: /* @__PURE__ */ s(z, { children: [
+                /* @__PURE__ */ o(
+                  M,
                   {
-                    color: d ? "tertiary" : "secondary",
+                    color: n ? "tertiary" : "secondary",
                     size: 24,
                     name: "attach_file",
                     display: "inline",
-                    className: o["tedi-file-dropzone__label-icon"]
+                    className: t["tedi-file-dropzone__label-icon"]
                   }
                 ),
-                h
+                y
               ] }),
-              className: o["tedi-file-dropzone__label"]
+              className: t["tedi-file-dropzone__label"]
             }
           ) })
         ]
       }
     ),
-    e ? /* @__PURE__ */ t(b, { ...e, id: p }) : a ? /* @__PURE__ */ t(b, { ...a, id: p }) : null,
-    !!r.length && /* @__PURE__ */ t(
-      v,
+    i && /* @__PURE__ */ o(O, { ...i, id: v }),
+    !!h.length && /* @__PURE__ */ o(
+      g,
       {
-        className: o["tedi-file-dropzone__file-list"],
+        className: t["tedi-file-dropzone__file-list"],
         style: "none",
-        "aria-label": s("file-dropzone.selected-files"),
-        children: r.map((i) => {
-          const n = typeof m == "function" ? m(i) : m, { actions: $, ...D } = n ?? {};
-          return /* @__PURE__ */ t(
-            v.Item,
+        "aria-label": d("file-dropzone.selected-files"),
+        children: h.map((e) => {
+          const a = typeof m == "function" ? m(e) : m, { actions: p, ...c } = a ?? {};
+          return /* @__PURE__ */ s(
+            g.Item,
             {
-              className: o["tedi-file-dropzone__file-list-item"],
-              children: /* @__PURE__ */ t(
-                j,
-                {
-                  ...D,
-                  name: i.name ?? "",
-                  isValid: i.isValid ?? (n == null ? void 0 : n.isValid),
-                  isLoading: i.isLoading ?? (n == null ? void 0 : n.isLoading),
-                  actions: /* @__PURE__ */ c(f, { children: [
-                    $,
-                    /* @__PURE__ */ t(V, { visualType: "neutral", icon: "delete", onClick: () => _(i), children: `${s("remove")} ${i.name ?? ""}` })
-                  ] })
-                }
-              )
+              className: t["tedi-file-dropzone__file-list-item"],
+              children: [
+                /* @__PURE__ */ o(
+                  w,
+                  {
+                    ...c,
+                    name: e.name ?? "",
+                    isValid: e.isValid ?? (a == null ? void 0 : a.isValid),
+                    isLoading: e.isLoading ?? (a == null ? void 0 : a.isLoading),
+                    actions: /* @__PURE__ */ s(z, { children: [
+                      p,
+                      /* @__PURE__ */ o(T, { visualType: "neutral", icon: "delete", onClick: () => $(e), children: `${d("remove")} ${e.name ?? ""}` })
+                    ] })
+                  }
+                ),
+                e.isValid === !1 && /* @__PURE__ */ o("span", { className: "sr-only", children: `${d("file-dropzone.failed")} ${e.name ?? ""}` })
+              ]
             },
-            i.id ?? `${i.name ?? "file"}-${i.size ?? ""}-${i.lastModified ?? ""}`
+            e.id ?? `${e.name ?? "file"}-${e.size ?? ""}-${e.lastModified ?? ""}`
           );
         })
       }
     ),
-    /* @__PURE__ */ t("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: r.length === 0 ? s("file-dropzone.no-file") : s("file-dropzone.files-selected", r.length) })
+    /* @__PURE__ */ o("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: L })
   ] });
 };
 export {
-  W as FileDropzone
+  te as FileDropzone
 };

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"),f=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),Y=require("../../../helpers/hooks/use-file-upload.cjs.js"),Z=require("../../base/typography/text/text.cjs.js"),k=require("../../buttons/button/button.cjs.js"),H=require("../../buttons/closing-button/closing-button.cjs.js"),G=require("../form-label/form-label.cjs.js"),ee=require("../../misc/separator/separator.cjs.js"),le=require("../../tags/tag/tag.cjs.js"),B=require("../feedback-text/feedback-text.cjs.js"),g=require("../input-group/input-group.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),ae=require("../../../providers/label-provider/use-labels.cjs.js"),T=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ie=require("../../layout/grid/row.cjs.js"),I=require("../../layout/grid/col.cjs.js"),te=j=>{var N;const{getLabel:n}=ae.useLabels(),{id:se,name:w,label:_,accept:v,multiple:q,onChange:m,className:R,wrapperClassName:U,defaultFiles:S,onDelete:z,hasClearButton:M=!0,files:u,readOnly:p,disabled:s=!1,maxSize:O,validateIndividually:V=!1,size:c="default",helper:i,...$}=j,{innerFiles:y,uploadErrorHelper:t,onFileChange:D,onFileRemove:P,handleClear:F,announcement:W}=Y.useFileUpload({accept:v,maxSize:O,multiple:q,validateIndividually:V,defaultFiles:S,onChange:m,onDelete:z,files:u}),A=T.default(),E=h.useId(),d=(N=g.useOptionalInputGroup)==null?void 0:N.call(g),J=d==null?void 0:d.hasExternalLabel,x=j.id??(d==null?void 0:d.inputId)??E,L=h.useRef(null),K=f.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},R),b=(i==null?void 0:i.id)??(i||t?`${x}-helper`:void 0),o=h.useMemo(()=>u&&m?u:y,[u,y,m]),Q=(l,r)=>{const X=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(le.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>P(l):void 0,isLoading:l.isLoading,"aria-label":X,children:l.name})},r)},C=()=>{if(o.length>1)return e.jsx("ul",{className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate-list"]),children:o.map((l,r)=>Q(l,r))});if(o.length===1){const l=o[0],r=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx(Z.Text,{"aria-label":r,className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate"]),children:l.name})}return null};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["tedi-file-upload__label-wrapper"],children:!J&&_&&e.jsx(G.FormLabel,{id:x,label:_??"",...$,renderWithoutLabel:p,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:W}),p?C():e.jsx("div",{className:f.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--${c}`]]:c},U),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(ie.Row,{children:[e.jsx(I.Col,{className:"display-flex",children:C()}),e.jsx(I.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:K,children:[e.jsx("input",{ref:L,id:x,type:"file",name:w,accept:v,onChange:D,multiple:q,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":b}),M&&o.length>0&&!s&&e.jsxs(e.Fragment,{children:[T.isBreakpointBelow(A,"md")?e.jsx(k.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:F,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(H.ClosingButton,{onClick:F,iconSize:18,title:n("clear")}),e.jsx(ee.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(k.Button,{visualType:"neutral",iconLeft:"file_upload",disabled:s,onClick:()=>{var l;return(l=L.current)==null?void 0:l.click()},className:a.default["tedi-file-upload__button"],size:c,children:n("file-upload.add")})]})})]})})}),i?e.jsx(B.FeedbackText,{...i,id:b}):t?e.jsx(B.FeedbackText,{...t,id:b}):null]})};exports.FileUpload=te;
+"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;

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

@@ -84,5 +84,8 @@ export interface FileUploadProps extends Omit<FormLabelProps, 'id' | 'label'> {
      */
     size?: 'small' | 'default';
 }
-export declare const FileUpload: (props: FileUploadProps) => JSX.Element;
+export declare const FileUpload: {
+    (props: FileUploadProps): JSX.Element;
+    displayName: string;
+};
 export default FileUpload;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-upload":"tedi-file-upload-115f37c2","tedi-file-upload__items":"tedi-file-upload__items-c73c19e5","tedi-file-upload__container":"tedi-file-upload__container-6b0f28a8","tedi-file-upload__container--default":"tedi-file-upload__container--default-56af0d96","tedi-file-upload__button":"tedi-file-upload__button-f37449e6","tedi-file-upload__container--small":"tedi-file-upload__container--small-4d5cd36e","tedi-file-upload--disabled":"tedi-file-upload--disabled-88f4fdcd","tedi-file-upload--error":"tedi-file-upload--error-388cda6f","tedi-file-upload--valid":"tedi-file-upload--valid-28d5eb71","tedi-file-upload__content":"tedi-file-upload__content-8b6bf324","tedi-file-upload__items--truncate":"tedi-file-upload__items--truncate-5c249a01","tedi-file-upload__tag--truncate":"tedi-file-upload__tag--truncate-4c99cb2b"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-upload":"tedi-file-upload-115f37c2","tedi-file-upload__button":"tedi-file-upload__button-f37449e6","tedi-file-upload__items":"tedi-file-upload__items-c73c19e5","tedi-file-upload__container":"tedi-file-upload__container-6b0f28a8","tedi-file-upload__container--default":"tedi-file-upload__container--default-56af0d96","tedi-file-upload__container--small":"tedi-file-upload__container--small-4d5cd36e","tedi-file-upload--disabled":"tedi-file-upload--disabled-88f4fdcd","tedi-file-upload--error":"tedi-file-upload--error-388cda6f","tedi-file-upload--valid":"tedi-file-upload--valid-28d5eb71","tedi-file-upload__content":"tedi-file-upload__content-8b6bf324","tedi-file-upload__items--truncate":"tedi-file-upload__items--truncate-5c249a01","tedi-file-upload__tag--truncate":"tedi-file-upload__tag--truncate-4c99cb2b"};exports.default=e;

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

@@ -1,9 +1,9 @@
 const e = {
   "tedi-file-upload": "tedi-file-upload-115f37c2",
+  "tedi-file-upload__button": "tedi-file-upload__button-f37449e6",
   "tedi-file-upload__items": "tedi-file-upload__items-c73c19e5",
   "tedi-file-upload__container": "tedi-file-upload__container-6b0f28a8",
   "tedi-file-upload__container--default": "tedi-file-upload__container--default-56af0d96",
-  "tedi-file-upload__button": "tedi-file-upload__button-f37449e6",
   "tedi-file-upload__container--small": "tedi-file-upload__container--small-4d5cd36e",
   "tedi-file-upload--disabled": "tedi-file-upload--disabled-88f4fdcd",
   "tedi-file-upload--error": "tedi-file-upload--error-388cda6f",

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),L=require("../../buttons/button/button.cjs.js"),N=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),u=v.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,input:x,...t},_)=>{const{getLabel:r}=w.useLabels(),b=j=>{j.key==="Enter"&&(a==null||a(t.value))},m=()=>{a==null||a(t.value)},p={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:b,onChange:o,input:{...x,role:"searchbox"},...e?{}:{icon:n}},q=c||r("search"),y=f??q;return l.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":y,children:[l.jsx(N.TextField,{...p}),e&&l.jsx(L.Button,{...e,onClick:m,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:r("search"),children:e.children??r("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),w=require("../../buttons/button/button.cjs.js"),j=require("../textfield/textfield.cjs.js"),a=require("./search.module.scss.cjs.js"),L=require("../../../providers/label-provider/use-labels.cjs.js"),n=v.forwardRef(({placeholder:u,isClearable:o=!0,searchIcon:r="search",onSearch:s,onChange:f,button:e,ariaLabel:h,className:_,input:p,...l},m)=>{const{getLabel:i}=L.useLabels(),b=g=>{g.key==="Enter"&&(s==null||s(l.value))},x=()=>{s==null||s(l.value)},d=typeof r=="string"?{name:r}:r,y={color:"secondary",...d,className:t.default(d.className,l.disabled&&a.default["tedi-search__icon--disabled"])},q={...l,ref:m,inputClassName:t.default(a.default["tedi-search__input"],e&&a.default["tedi-search__input--has-button"],_),placeholder:u,isClearable:o,onKeyDown:b,onChange:f,input:{...p,role:"searchbox"},...e?{}:{icon:y}},N=h||i("search");return c.jsxs("div",{className:t.default(a.default["tedi-search__wrapper"],l.size==="small"&&a.default["tedi-search__wrapper--small"],l.size==="large"&&a.default["tedi-search__wrapper--large"]),role:"search","aria-label":N,children:[c.jsx(j.TextField,{...q}),e&&c.jsx(w.Button,{...e,onClick:x,className:t.default(a.default["tedi-search__button"],!e.children&&a.default["tedi-search__button--icon-only"],e.className),"aria-label":e.children?void 0:i("search"),children:e.children??i("search")})]})});n.displayName="Search";exports.Search=n;