@tedi-design-system/react 19.0.0-rc.7 → 19.0.0-rc.9

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"),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;
+"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"),t=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:a,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}),te=M.default(),ae=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)??ae,q=p.useRef(null),N=p.useRef(null),se=j.default(t.default["tedi-file-upload"],{[t.default["tedi-file-upload--disabled"]]:s},D),B=(a==null?void 0:a.type)==="error",h=i??(B?void 0:a),b=B?a: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:t.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(t.default["tedi-file-upload__items"],t.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:t.default["tedi-file-upload__label-wrapper"],children:!ie&&v&&e.jsx(ue.FormLabel,{id:f,label:v??"",...Z,renderWithoutLabel:x,className:t.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(t.default["tedi-file-upload__container"],{[t.default["tedi-file-upload--disabled"]]:s,[t.default["tedi-file-upload--error"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="error",[t.default["tedi-file-upload--valid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="valid"},{[t.default[`tedi-file-upload__container--${u}`]]:u},W),children:e.jsx("div",{className:t.default["tedi-file-upload__content"],children:e.jsxs(xe.Row,{children:[e.jsx(O.Col,{className:"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":!!a&&a.type==="error","aria-describedby":k}),K&&d.length>0&&!s&&e.jsxs(e.Fragment,{children:[M.isBreakpointBelow(te,"md")?e.jsx(S.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:I,className:t.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:t.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.es.js

@@ -7,9 +7,9 @@ import { Button as S } from "../../buttons/button/button.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 { Tag as ue } from "../../tags/tag/tag.es.js";
 import { FeedbackText as A } from "../feedback-text/feedback-text.es.js";
-import { useOptionalInputGroup as ue } from "../input-group/input-group.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 fe } from "../../../providers/label-provider/use-labels.es.js";
 import he, { isBreakpointBelow as ve } from "../../../helpers/hooks/use-breakpoint.es.js";
@@ -35,7 +35,7 @@ const _e = (O) => {
     maxSize: K,
     validateIndividually: Q = !1,
     showRestrictions: X,
-    size: p = "default",
+    size: u = "default",
     helper: o,
     ...Y
   } = O, { innerFiles: B, uploadErrorHelper: a, onFileChange: Z, onFileRemove: E, handleClear: G, announcement: ee } = ne({
@@ -48,7 +48,7 @@ const _e = (O) => {
     onDelete: H,
     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 = () => {
+  }), ie = he(), le = f.useId(), r = ($ = pe) == null ? void 0 : $(), ae = r == null ? void 0 : r.hasExternalLabel, p = 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) ?? `${p}-helper` : void 0, k = _ ? `${p}-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();
   }, te = (e) => {
@@ -58,7 +58,7 @@ const _e = (O) => {
   }, se = (e, c) => {
     const j = e.isValid === !1;
     return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ t(
-      pe,
+      ue,
       {
         role: "presentation",
         color: j ? "danger" : "primary",
@@ -95,12 +95,12 @@ const _e = (O) => {
     /* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: !ae && g && /* @__PURE__ */ i(
       ce,
       {
-        id: u,
+        id: p,
         label: g ?? "",
         ...Y,
         renderWithoutLabel: v,
         className: l["tedi-file-upload__label"],
-        size: p
+        size: u
       }
     ) }),
     /* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: ee }),
@@ -114,17 +114,17 @@ const _e = (O) => {
             [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 },
+          { [l[`tedi-file-upload__container--${u}`]]: u },
           W
         ),
         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, { className: "flex", children: U() }),
           /* @__PURE__ */ i(M, { xs: 12, md: "auto", children: /* @__PURE__ */ t("div", { className: oe, children: [
             /* @__PURE__ */ i(
               "input",
               {
                 ref: C,
-                id: u,
+                id: p,
                 type: "file",
                 name: D,
                 accept: F,
@@ -161,7 +161,7 @@ const _e = (O) => {
                   return (e = C.current) == null ? void 0 : e.click();
                 },
                 className: l["tedi-file-upload__button"],
-                size: p,
+                size: u,
                 "aria-describedby": I,
                 children: n("file-upload.add")
               }