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

package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.es.js

@@ -1,159 +1,181 @@
-import { jsx as s, jsxs as n, Fragment as E } from "react/jsx-runtime";
-import J, { useState as M, createElement as K } from "react";
-import l from "../../../../../../../external/classnames/index.es.js";
-import { Icon as O } from "../../../../base/icon/icon.es.js";
-import { Collapse as P } from "../../../../buttons/collapse/collapse.es.js";
-import { Link as C } from "../../../../navigation/link/link.es.js";
+import { jsx as s, jsxs as l, Fragment as M } from "react/jsx-runtime";
+import Q, { useState as O, createElement as R } from "react";
+import o from "../../../../../../../external/classnames/index.es.js";
+import { Icon as P } from "../../../../base/icon/icon.es.js";
+import { Collapse as B } from "../../../../buttons/collapse/collapse.es.js";
+import { Link as w } from "../../../../navigation/link/link.es.js";
 import e from "../../sidenav.module.scss.es.js";
-import { SideNavDropdown as Q } from "../sidenav-dropdown/sidenav-dropdown.es.js";
-import { Tooltip as N } from "../../../../overlays/tooltip/tooltip.es.js";
-const R = (B) => {
+import { SideNavDropdown as U } from "../sidenav-dropdown/sidenav-dropdown.es.js";
+import { Tooltip as f } from "../../../../overlays/tooltip/tooltip.es.js";
+import { useLabels as V } from "../../../../../providers/label-provider/use-labels.es.js";
+const X = (j) => {
   const {
-    icon: a,
-    children: t,
-    isActive: u,
-    onClick: f,
-    subItems: b,
-    subItemGroups: j,
-    as: x,
-    onItemClick: v,
-    className: z,
-    level: o = 1,
-    isCollapsed: c = !1,
-    isDefaultOpen: H = !1,
-    sideNavItemSize: L = "default",
-    ...m
-  } = B, [g, $] = M(H ?? !1), [T, A] = M(!1), w = J.useId(), _ = j ?? (b ? [{ subItems: b }] : null), d = !!_, F = l(
+    icon: i,
+    children: n,
+    isActive: b,
+    onClick: I,
+    subItems: y,
+    subItemGroups: z,
+    as: S,
+    onItemClick: h,
+    className: H,
+    level: c = 1,
+    isCollapsed: m = !1,
+    isDefaultOpen: K = !1,
+    sideNavItemSize: $ = "default",
+    ..._
+  } = j, { getLabel: T } = V(), [d, D] = O(K ?? !1), [L, A] = O(!1), u = Q.useId(), p = z ?? (y ? [{ subItems: y }] : null), r = !!p, F = o(
     e["tedi-sidenav__item"],
-    e[`tedi-sidenav__item--${L}`],
+    e[`tedi-sidenav__item--${$}`],
     {
-      [e[`tedi-sidenav__item--level-${o}`]]: o > 1,
-      [e["tedi-sidenav__item--current"]]: u,
-      [e["tedi-sidenav__item--has-children"]]: d
+      [e[`tedi-sidenav__item--level-${c}`]]: c > 1,
+      [e["tedi-sidenav__item--current"]]: b,
+      [e["tedi-sidenav__item--has-children"]]: r
     },
-    z
-  ), p = (i) => {
-    const r = {
+    H
+  ), v = (a) => {
+    const t = {
       color: "white",
-      className: l(e["tedi-sidenav__icon"])
-    }, h = typeof i == "string" ? { ...r, name: i } : {
-      ...r,
-      ...i,
-      className: l(r.className, i == null ? void 0 : i.className)
+      className: o(e["tedi-sidenav__icon"])
+    }, N = typeof a == "string" ? { ...t, name: a } : {
+      ...t,
+      ...a,
+      className: o(t.className, a == null ? void 0 : a.className)
     };
-    return /* @__PURE__ */ s(O, { ...h });
-  }, G = (i) => {
-    f == null || f(i), d || v == null || v();
-  }, S = (i) => {
-    $(i);
-  }, W = d && (m.href || m.to), I = {
-    ...m,
-    as: x,
+    return /* @__PURE__ */ s(P, { ...N });
+  }, G = (a) => {
+    I == null || I(a), r || h == null || h();
+  }, k = (a) => {
+    D(a);
+  }, W = (a) => {
+    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), D((g) => {
+      const t = !g;
+      return k(t), t;
+    }));
+  }, q = r && (_.href || _.to), C = {
+    ..._,
+    as: S,
     onClick: G,
-    className: l(e["tedi-sidenav__link"], W && e["tedi-sidenav__link--has-children-link"]),
+    className: o(e["tedi-sidenav__link"], q && e["tedi-sidenav__link--has-children-link"]),
     noStyle: !0,
     role: "menuitem",
-    "aria-current": u ? "page" : void 0,
-    "aria-label": c && typeof t == "string" ? t : void 0
-  }, k = () => !c && (_ == null ? void 0 : _.map((i, D) => {
-    var r;
-    return /* @__PURE__ */ n("div", { children: [
-      (i == null ? void 0 : i.subHeading) && /* @__PURE__ */ s("div", { className: e["tedi-sidenav__subheading"], children: i.subHeading }),
-      /* @__PURE__ */ s("ul", { className: e["tedi-sidenav__list"], role: "menubar", children: (r = i.subItems) == null ? void 0 : r.map((h, q) => /* @__PURE__ */ K(
-        R,
+    "aria-current": b ? "page" : void 0,
+    "aria-label": m && typeof n == "string" ? n : void 0,
+    ...r ? {
+      "aria-haspopup": "true",
+      "aria-expanded": d,
+      "aria-controls": u
+    } : {}
+  }, x = () => !m && (p == null ? void 0 : p.map((a, g) => {
+    var t;
+    return /* @__PURE__ */ l("div", { children: [
+      (a == null ? void 0 : a.subHeading) && /* @__PURE__ */ s("div", { className: e["tedi-sidenav__subheading"], children: a.subHeading }),
+      /* @__PURE__ */ s("ul", { className: e["tedi-sidenav__list"], role: "menu", children: (t = a.subItems) == null ? void 0 : t.map((N, J) => /* @__PURE__ */ R(
+        X,
         {
-          as: x,
-          ...h,
-          key: q,
-          level: o + 1,
-          onItemClick: v,
-          isCollapsed: c,
-          className: l(e["tedi-sidenav__sub-item"], h.className)
+          as: S,
+          ...N,
+          key: J,
+          level: c + 1,
+          onItemClick: h,
+          isCollapsed: m,
+          className: o(e["tedi-sidenav__sub-item"], N.className)
         }
       )) })
-    ] }, D);
-  })), y = /* @__PURE__ */ s("li", { "data-name": "sidenav-item", className: F, role: "presentation", children: d && c ? /* @__PURE__ */ s(
-    Q,
+    ] }, g);
+  })), E = /* @__PURE__ */ s("li", { "data-name": "sidenav-item", className: F, children: r && m ? /* @__PURE__ */ s(
+    U,
     {
-      trigger: /* @__PURE__ */ s(N.Trigger, { children: /* @__PURE__ */ n(
+      trigger: /* @__PURE__ */ s(f.Trigger, { children: /* @__PURE__ */ l(
         "span",
         {
-          className: l(e["tedi-sidenav__link"], T && e["tedi-sidenav__link--active"]),
+          className: o(e["tedi-sidenav__link"], L && e["tedi-sidenav__link--active"]),
           children: [
-            a && p(a),
+            i && v(i),
             /* @__PURE__ */ s(
-              O,
+              P,
               {
-                name: T ? "chevron_right" : "expand_more",
+                name: L ? "chevron_right" : "expand_more",
                 color: "white",
                 className: e["tedi-sidenav__toggle-icon"],
                 size: 18
               }
             ),
-            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
           ]
         }
       ) }),
-      groups: _,
+      groups: p,
       onOpenChange: A
     }
-  ) : d && o === 1 ? m.href || m.to ? /* @__PURE__ */ n(E, { children: [
-    /* @__PURE__ */ n(C, { ...I, children: [
-      a && p(a),
-      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+  ) : r && c === 1 ? _.href || _.to ? /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(w, { ...C, children: [
+      i && v(i),
+      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
     ] }),
     /* @__PURE__ */ s("div", { className: e["tedi-sidenav__link-collapse-wrapper"], children: /* @__PURE__ */ s(
-      P,
+      B,
       {
-        id: w,
+        id: u,
         hideCollapseText: !0,
-        open: g,
-        onToggle: S,
+        open: d,
+        onToggle: k,
+        toggleLabel: T("sidenav.toggleSubmenuChildren", {
+          isCollapsedInternal: d,
+          children: n
+        }),
         className: e["tedi-sidenav__collapse"],
-        children: k()
+        children: x()
       }
     ) })
   ] }) : /* @__PURE__ */ s(
-    P,
+    B,
     {
-      id: w,
+      id: u,
       hideCollapseText: !0,
-      open: g,
-      onToggle: S,
+      open: d,
+      onToggle: k,
       className: e["tedi-sidenav__collapse"],
-      title: /* @__PURE__ */ n(
+      toggleLabel: T("sidenav.toggleSubmenuChildren", {
+        isCollapsedInternal: d,
+        children: n
+      }),
+      title: /* @__PURE__ */ l(
         "span",
         {
-          className: l(
+          className: o(
             e["tedi-sidenav__link"],
-            g && e["tedi-sidenav__link--active"]
+            d && e["tedi-sidenav__link--active"]
           ),
-          role: "menuitem",
-          "aria-current": u ? "page" : void 0,
+          role: "button",
+          "aria-expanded": d,
+          "aria-controls": u,
+          "aria-current": b ? "page" : void 0,
+          onKeyDown: W,
           children: [
-            a && p(a),
-            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+            i && v(i),
+            /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
           ]
         }
       ),
-      children: k()
+      children: x()
     }
-  ) : d ? /* @__PURE__ */ n(E, { children: [
-    /* @__PURE__ */ n(C, { ...I, children: [
-      a && p(a),
-      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t }),
+  ) : r ? /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(w, { ...C, children: [
+      i && v(i),
+      /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n }),
       /* @__PURE__ */ s("i", { className: e["tedi-sidenav__bullet"] })
     ] }),
-    k()
-  ] }) : /* @__PURE__ */ s(N.Trigger, { children: /* @__PURE__ */ n(C, { ...I, children: [
-    a && p(a),
-    /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: t })
+    x()
+  ] }) : /* @__PURE__ */ s(f.Trigger, { children: /* @__PURE__ */ l(w, { ...C, children: [
+    i && v(i),
+    /* @__PURE__ */ s("span", { className: e["tedi-sidenav__title"], children: n })
   ] }) }) });
-  return o === 1 && c ? /* @__PURE__ */ n(N, { placement: "right", focusManager: { order: ["content"] }, children: [
-    /* @__PURE__ */ s(N.Content, { maxWidth: "medium", children: t }),
-    y
-  ] }) : y;
+  return c === 1 && m ? /* @__PURE__ */ l(f, { placement: "right", focusManager: { order: ["content"] }, children: [
+    /* @__PURE__ */ s(f.Content, { maxWidth: "medium", children: n }),
+    E
+  ] }) : E;
 };
 export {
-  R as SideNavItem
+  X as SideNavItem
 };

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),r=require("../../../../../../../external/classnames/index.cjs.js"),p=require("../../../../buttons/button/button.cjs.js"),f=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),b=require("../../../../../providers/label-provider/use-labels.cjs.js"),t=({menuOpen:l,toggleMenu:s,referenceRef:i,getReferenceProps:n=()=>({}),variant:e="mobile"})=>{const{getLabel:a}=b.useLabels(),c=a("header.toggle",l),u=r.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),d=e==="collapse"?f.FloatingButton:p.Button;return g.jsx(d,{...n(),ref:i,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:s,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:c})};exports.SidenavToggle=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),p=require("../../../../../../../external/classnames/index.cjs.js"),b=require("../../../../buttons/button/button.cjs.js"),_=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({menuOpen:l,toggleMenu:s,referenceRef:n,getReferenceProps:a=()=>({}),variant:e="mobile"})=>{const{getLabel:c}=y.useLabels(),d=c("header.toggle",l),u=p.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),r=e==="collapse"?_.FloatingButton:b.Button,g=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(!l))};return f.jsx(r,{...a(),ref:n,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:()=>s(!l),onKeyDown:g,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:d})};exports.SidenavToggle=i;exports.default=i;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { UnknownType } from '../../../../../../tedi/types/commonTypes';
+import { UnknownType } from '../../../../../types/commonTypes';
 export type SidenavToggleVariant = 'mobile' | 'collapse';
 export type SidenavToggleProps = {
     /**

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.es.js

@@ -1,36 +1,39 @@
-import { jsx as p } from "react/jsx-runtime";
-import g from "../../../../../../../external/classnames/index.es.js";
-import { Button as n } from "../../../../buttons/button/button.es.js";
-import { FloatingButton as r } from "../../../../buttons/floating-button/floating-button.es.js";
+import { jsx as g } from "react/jsx-runtime";
+import d from "../../../../../../../external/classnames/index.es.js";
+import { Button as f } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as y } from "../../../../buttons/floating-button/floating-button.es.js";
 import l from "./sidenav-toggle.module.scss.es.js";
-import { useLabels as d } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
 const E = ({
   menuOpen: o,
-  toggleMenu: s,
-  referenceRef: t,
-  getReferenceProps: i = () => ({}),
+  toggleMenu: t,
+  referenceRef: i,
+  getReferenceProps: a = () => ({}),
   variant: e = "mobile"
 }) => {
-  const { getLabel: a } = d(), c = a("header.toggle", o), m = g(l["tedi-sidenav-toggle"], {
+  const { getLabel: c } = _(), r = c("header.toggle", o), n = d(l["tedi-sidenav-toggle"], {
     [l["tedi-sidenav-toggle--open"]]: o,
     [l[`tedi-sidenav-toggle--${e}`]]: !0
-  });
-  return /* @__PURE__ */ p(
-    e === "collapse" ? r : n,
+  }), p = e === "collapse" ? y : f, m = (s) => {
+    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), t(!o));
+  };
+  return /* @__PURE__ */ g(
+    p,
     {
-      ...i(),
-      ref: t,
+      ...a(),
+      ref: i,
       icon: {
         name: e === "collapse" ? o ? "right_panel_open" : "left_panel_open" : o ? "close" : "menu",
         className: l["tedi-sidenav-toggle__icon"],
         size: e === "collapse" ? 18 : 24
       },
       visualType: e === "collapse" ? "secondary" : "primary",
-      className: m,
-      onClick: s,
+      className: n,
+      onClick: () => t(!o),
+      onKeyDown: m,
       position: e === "collapse" ? "absolute" : "static",
       size: e === "collapse" ? "small" : "",
-      children: c
+      children: r
     }
   );
 };

package/src/tedi/components/layout/sidenav/sidenav.d.ts

@@ -84,15 +84,7 @@ export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNa
     Item: <C extends React.ElementType = "a">(props: SideNavItemProps<C> & {
         onItemClick?: () => void;
         level?: number;
-        isCollapsed
-        /**
-         * Show dividers between navigation items
-         * @default true
-         */
-        ? /**
-         * Show dividers between navigation items
-         * @default true
-         */: boolean;
+        isCollapsed?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
     Dropdown: <C extends React.ElementType = "a">({ trigger, groups, onOpenChange, }: {
         trigger: React.ReactNode;

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

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

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

@@ -19,6 +19,11 @@ export interface UseFileUploadProps {
     onChange?: (files: FileUploadFile[]) => void;
     onDelete?: (file: FileUploadFile) => void;
     files?: FileUploadFile[];
+    /**
+     * How long (ms) the announcement message should be visible.
+     * @default 5000
+     */
+    announcementTimeout?: number;
 }
 export declare const useFileUpload: (props: UseFileUploadProps) => {
     innerFiles: FileUploadFile[];
@@ -27,4 +32,5 @@ export declare const useFileUpload: (props: UseFileUploadProps) => {
     onFileRemove: (file: FileUploadFile) => void;
     handleClear: () => FileUploadFile[];
     fileInputRef: React.RefObject<HTMLInputElement>;
+    announcement: string;
 };

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

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