@tedi-design-system/react 14.4.0-rc.9 → 15.0.0-rc.10

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),L=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),z=require("../../base/icon/icon.cjs.js"),E=require("../../base/typography/text/text.cjs.js"),K=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),A=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=require("../../../providers/label-provider/use-labels.cjs.js"),G=require("../../../helpers/hooks/use-print.cjs.js"),C=require("../../layout/grid/row.cjs.js"),r=require("../../layout/grid/col.cjs.js"),g=f=>{const{getCurrentBreakpointProps:v}=A.useBreakpointProps(f.defaultServerBreakpoint),{getLabel:m}=F.useLabels(),{id:n,children:x,className:P,openText:k=m("open"),closeText:I=m("close"),hideCollapseText:h=!1,title:w,titleRowProps:N,defaultOpen:$,open:d,onToggle:c,arrowType:i="default",size:o="default",underline:O=!0,...S}=v(f),B=`${n}__trigger`,j=`${n}__label`,u=`${n}__content`,M=`${n}__animate`,[b,R]=_.useState(()=>$),p=G.usePrint(),a=_.useMemo(()=>p||(d!==void 0?d:b),[p,d,b]),T=s.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],h&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${i}`],P),q=()=>{const l=!a;R(l),c==null||c(l)},D=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},y=_.useMemo(()=>t.jsx("div",{id:u,className:e.default["tedi-collapse__content"],children:x}),[x,u]);return t.jsxs("div",{"data-name":"collapse",...S,className:T,children:[t.jsx("button",{id:B,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-labelledby":j,"aria-expanded":a,"aria-controls":u,onKeyDown:D,onClick:q,children:t.jsxs(C.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...N,element:"span",children:[w&&t.jsx(r.Col,{"aria-hidden":"true",children:w}),t.jsx(r.Col,{width:"auto",children:t.jsxs(C.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(K.Print,{visibility:"hide",children:t.jsx(r.Col,{width:"auto",className:s.default({"visually-hidden":h}),children:t.jsx(E.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:O}),id:j,children:a?I:k})})}),t.jsx(r.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${i}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(z.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${i}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:o==="small"||i==="secondary"?18:24})})})]})})]})}),p?y:t.jsx(L.default,{id:M,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:y})]})};exports.Collapse=g;exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),K=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),A=require("../../base/icon/icon.cjs.js"),F=require("../../base/typography/text/text.cjs.js"),G=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),H=require("../../../helpers/hooks/use-print.cjs.js"),J=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Q=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),N=x=>{const{getCurrentBreakpointProps:P}=J.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=Q.useLabels(),{id:r,children:w,className:k,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:I=!1,title:c,titleRowProps:O,defaultOpen:$,open:d,onToggle:u,arrowType:n="default",size:o="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,...M}=P(x),p=`${r}__trigger`,f=`${r}__content`,R=`${r}__animate`,[b,T]=_.useState(()=>$),m=H.usePrint(),a=_.useMemo(()=>m||(d!==void 0?d:b),[m,d,b]),L=B===!0&&!c,D=s.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],L&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${n}`],k),q=()=>{const l=!a;T(l),u==null||u(l)},z=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},E=y||(a?g:j),C=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...M,className:D,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":E,"aria-expanded":a,"aria-controls":f,onKeyDown:z,onClick:q,children:t.jsxs(v.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[c&&t.jsx(i.Col,{"aria-hidden":"true",children:c}),t.jsx(i.Col,{width:"auto",children:t.jsxs(v.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(G.Print,{visibility:"hide",children:t.jsx(i.Col,{width:"auto",className:s.default({"visually-hidden":I}),children:t.jsx(F.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(i.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(A.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:o==="small"||n==="secondary"?18:24})})})]})})]})}),m?C:t.jsx(K.default,{id:R,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:C})]})};exports.Collapse=N;exports.default=N;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -34,6 +34,12 @@ type CollapseBreakpointProps = {
      */
     size?: 'default' | 'small';
     underline?: boolean;
+    /**
+     * Render collapse as icon-only toggle.
+     * Icon-only styles are applied ONLY when no title is provided.
+     * @default false
+     */
+    iconOnly?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
     /**
@@ -65,6 +71,11 @@ export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps
      * Defaults to the result of `getLabel('close')`.
      */
     closeText?: string;
+    /**
+     * Descriptive label for screen readers (e.g. "Toggle Products submenu")
+     * If provided, overrides the default open/close text for the accessible name.
+     */
+    toggleLabel?: string;
 }
 export declare const Collapse: (props: CollapseProps) => JSX.Element;
 export default Collapse;

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,97 +1,98 @@
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import o from "../../../../../external/classnames/index.es.js";
-import u from "react";
-import E from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { Icon as K } from "../../base/icon/icon.es.js";
-import { Text as L } from "../../base/typography/text/text.es.js";
-import { Print as A } from "../../misc/print/print.es.js";
+import f from "react";
+import A from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { Icon as H } from "../../base/icon/icon.es.js";
+import { Text as q } from "../../base/typography/text/text.es.js";
+import { Print as F } from "../../misc/print/print.es.js";
 import e from "./collapse.module.scss.es.js";
-import { useBreakpointProps as H } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as q } from "../../../providers/label-provider/use-labels.es.js";
-import { usePrint as F } from "../../../helpers/hooks/use-print.es.js";
-import { Row as v } from "../../layout/grid/row.es.js";
-import { Col as r } from "../../layout/grid/col.es.js";
-const oe = (h) => {
-  const { getCurrentBreakpointProps: I } = H(h.defaultServerBreakpoint), { getLabel: f } = q(), {
-    id: n,
-    children: w,
-    className: k,
-    openText: $ = f("open"),
-    closeText: P = f("close"),
-    hideCollapseText: y = !1,
-    title: g,
-    titleRowProps: O,
-    defaultOpen: B,
-    open: c,
-    onToggle: d,
-    arrowType: i = "default",
-    size: s = "default",
-    underline: S = !0,
-    ...T
-  } = I(h), j = `${n}__trigger`, x = `${n}__label`, p = `${n}__content`, D = `${n}__animate`, [b, M] = u.useState(() => B), m = F(), a = u.useMemo(
-    () => m || (c !== void 0 ? c : b),
-    [m, c, b]
-  ), R = o(
+import { usePrint as G } from "../../../helpers/hooks/use-print.es.js";
+import { useBreakpointProps as J } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
+import { Row as k } from "../../layout/grid/row.es.js";
+import { Col as s } from "../../layout/grid/col.es.js";
+const se = (w) => {
+  const { getCurrentBreakpointProps: O } = J(w.defaultServerBreakpoint), { getLabel: y } = Q(), {
+    id: r,
+    children: g,
+    className: P,
+    openText: b = y("open"),
+    closeText: x = y("close"),
+    hideCollapseText: $ = !1,
+    title: c,
+    titleRowProps: B,
+    defaultOpen: S,
+    open: d,
+    onToggle: p,
+    arrowType: n = "default",
+    size: i = "default",
+    underline: T = !0,
+    toggleLabel: N,
+    iconOnly: j = !1,
+    ...D
+  } = O(w), m = `${r}__trigger`, u = `${r}__content`, L = `${r}__animate`, [C, M] = f.useState(() => S), _ = G(), a = f.useMemo(
+    () => _ || (d !== void 0 ? d : C),
+    [_, d, C]
+  ), R = j === !0 && !c, z = o(
     e["tedi-collapse"],
-    s === "small" && e["tedi-collapse--small"],
+    i === "small" && e["tedi-collapse--small"],
     a && e["tedi-collapse--is-open"],
-    y && e["tedi-collapse--icon-only"],
-    e[`tedi-collapse--arrow-${i}`],
-    k
-  ), C = () => {
+    R && e["tedi-collapse--icon-only"],
+    e[`tedi-collapse--arrow-${n}`],
+    P
+  ), v = () => {
     const l = !a;
-    M(l), d == null || d(l);
-  }, z = (l) => {
-    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), C());
-  }, N = u.useMemo(
-    () => /* @__PURE__ */ t("div", { id: p, className: e["tedi-collapse__content"], children: w }),
-    [w, p]
+    M(l), p == null || p(l);
+  }, E = (l) => {
+    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), v());
+  }, K = N || (a ? x : b), I = f.useMemo(
+    () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
+    [g, u, m]
   );
-  return /* @__PURE__ */ _("div", { "data-name": "collapse", ...T, className: R, children: [
+  return /* @__PURE__ */ h("div", { "data-name": "collapse", ...D, className: z, children: [
     /* @__PURE__ */ t(
       "button",
       {
-        id: j,
+        id: m,
         type: "button",
         "data-name": "collapse-trigger",
         className: e["tedi-collapse__title"],
-        "aria-labelledby": x,
+        "aria-label": K,
         "aria-expanded": a,
-        "aria-controls": p,
-        onKeyDown: z,
-        onClick: C,
-        children: /* @__PURE__ */ _(v, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...O, element: "span", children: [
-          g && /* @__PURE__ */ t(r, { "aria-hidden": "true", children: g }),
-          /* @__PURE__ */ t(r, { width: "auto", children: /* @__PURE__ */ _(v, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
-            /* @__PURE__ */ t(A, { visibility: "hide", children: /* @__PURE__ */ t(r, { width: "auto", className: o({ "visually-hidden": y }), children: /* @__PURE__ */ t(
-              L,
+        "aria-controls": u,
+        onKeyDown: E,
+        onClick: v,
+        children: /* @__PURE__ */ h(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
+          c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+            /* @__PURE__ */ t(F, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
+              q,
               {
                 element: "span",
                 className: o(e["tedi-collapse__text"], {
-                  [e["tedi-collapse__text--underline"]]: S
+                  [e["tedi-collapse__text--underline"]]: T
                 }),
-                id: x,
-                children: a ? P : $
+                children: a ? x : b
               }
             ) }) }),
-            /* @__PURE__ */ t(r, { width: "auto", children: /* @__PURE__ */ t(
+            /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
               "div",
               {
                 className: o(
                   e["tedi-collapse__icon-wrapper"],
-                  e[`tedi-collapse__icon-wrapper--${i}`],
-                  s === "small" && e["tedi-collapse__icon-wrapper--small"]
+                  e[`tedi-collapse__icon-wrapper--${n}`],
+                  i === "small" && e["tedi-collapse__icon-wrapper--small"]
                 ),
                 children: /* @__PURE__ */ t(
-                  K,
+                  H,
                   {
                     className: o(
                       e["tedi-collapse__icon"],
-                      e[`tedi-collapse__icon--${i}`],
-                      s === "small" && e["tedi-collapse__icon--small"]
+                      e[`tedi-collapse__icon--${n}`],
+                      i === "small" && e["tedi-collapse__icon--small"]
                     ),
                     name: "expand_more",
-                    size: s === "small" || i === "secondary" ? 18 : 24
+                    size: i === "small" || n === "secondary" ? 18 : 24
                   }
                 )
               }
@@ -100,10 +101,10 @@ const oe = (h) => {
         ] })
       }
     ),
-    m ? N : /* @__PURE__ */ t(E, { id: D, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: N })
+    _ ? I : /* @__PURE__ */ t(A, { id: L, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
   ] });
 };
 export {
-  oe as Collapse,
-  oe as default
+  se as Collapse,
+  se as default
 };

package/src/tedi/components/content/label/label.d.ts

@@ -32,5 +32,5 @@ export interface LabelProps extends BreakpointSupport<LabelBreakpointProps>, Lab
      */
     tooltip?: string;
 }
-export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLSpanElement | HTMLLabelElement>>;
+export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement | HTMLSpanElement>>;
 export {};

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

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

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

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

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"};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__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;

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

@@ -8,7 +8,9 @@ const e = {
   "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__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"
 };
 export {
   e as default

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),S=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),a=require("./radio.module.scss.cjs.js"),v=require("../../layout/grid/row.cjs.js"),b=require("../../layout/grid/col.cjs.js"),x=j=>{const{id:r,label:l,value:u,className:k,disabled:f,onChange:t,hideLabel:p,helper:i,checked:o,defaultChecked:g,hover:q,name:C,tooltip:N,size:h="default",invalid:R,...y}=j,[m,w]=n.useState(g||!1),s=n.useRef(null),L=n.useMemo(()=>t&&typeof o<"u"?o:m,[t,m,o]),M=d=>{typeof o>"u"&&w(d==null?void 0:d.target.checked),t==null||t(u,d==null?void 0:d.target.checked)},F=i?(i==null?void 0:i.id)??`${r}-helper`:void 0,_=c.default(a.default["tedi-radio"],{[a.default["tedi-radio--disabled"]]:f});return e.jsxs("div",{"data-name":"radio",...y,children:[e.jsxs(v.Row,{gutter:0,children:[e.jsx(b.Col,{width:"auto",children:e.jsxs("div",{className:a.default["tedi-radio__outer-indicator-wrapper"],children:[e.jsx("input",{id:r,value:u,name:C,type:"radio",disabled:f,checked:L,onChange:M,className:a.default["tedi-radio__input"]}),e.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=s.current)==null?void 0:d.click()},className:c.default(a.default["tedi-radio__indicator"],{[a.default["tedi-radio__indicator--hover"]]:q},{[a.default[`tedi-radio__indicator--size-${h}`]]:h},{[a.default["tedi-radio__indicator--invalid"]]:R},k),"data-testid":"radio-indicator"})]})}),e.jsx(b.Col,{children:l&&typeof l=="string"?e.jsx(T.FormLabel,{ref:s,className:_,id:r,"data-testid":"radio-label",hideLabel:p,label:l,tooltip:N}):e.jsx("label",{ref:s,htmlFor:r,className:_,"data-testid":"radio-label",children:l})})]}),i&&e.jsx(S.FeedbackText,{id:F,...i,className:c.default(a.default["tedi-radio__helper"],i.className)})]})};exports.Radio=x;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),I=require("../feedback-text/feedback-text.cjs.js"),S=require("../form-label/form-label.cjs.js"),a=require("./radio.module.scss.cjs.js"),T=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),j=k=>{const{id:i,label:o,value:u,className:g,disabled:f,onChange:t,hideLabel:q,helper:r,checked:l,defaultChecked:C,hover:N,name:R,tooltip:h,size:b="default",invalid:y,...w}=k,[m,L]=n.useState(C||!1),s=n.useRef(null),M=n.useMemo(()=>t&&typeof l<"u"?l:m,[t,m,l]),v=d=>{typeof l>"u"&&L(d==null?void 0:d.target.checked),t==null||t(u,d==null?void 0:d.target.checked)},_=r?r.id??`${i}-helper`:void 0,F=h?`${i}-tooltip`:void 0,p=c.default(a.default["tedi-radio"],{[a.default["tedi-radio--disabled"]]:f});return e.jsxs("div",{"data-name":"radio",...w,children:[e.jsxs(T.Row,{gutter:0,children:[e.jsx(x.Col,{width:"auto",children:e.jsxs("div",{className:a.default["tedi-radio__outer-indicator-wrapper"],children:[e.jsx("input",{id:i,value:u,name:R,type:"radio",disabled:f,checked:M,onChange:v,className:a.default["tedi-radio__input"],"aria-describedby":[_,F].filter(Boolean).join(" ")}),e.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=s.current)==null?void 0:d.click()},className:c.default(a.default["tedi-radio__indicator"],{[a.default["tedi-radio__indicator--hover"]]:N},{[a.default[`tedi-radio__indicator--size-${b}`]]:b},{[a.default["tedi-radio__indicator--invalid"]]:y},g),"data-testid":"radio-indicator"})]})}),e.jsx(x.Col,{children:o&&typeof o=="string"?e.jsx(S.FormLabel,{ref:s,className:p,id:i,"data-testid":"radio-label",hideLabel:q,label:o,tooltip:h}):e.jsx("label",{ref:s,htmlFor:i,className:p,"data-testid":"radio-label",children:o})})]}),r&&e.jsx(I.FeedbackText,{id:_,...r,className:c.default(a.default["tedi-radio__helper"],r.className)})]})};exports.Radio=j;exports.default=j;