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

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

@@ -1,97 +1,110 @@
-import { jsxs as d, Fragment as y, jsx as s } from "react/jsx-runtime";
-import { useFloating as I, useInteractions as N, useClick as F, useDismiss as k, FloatingOverlay as x, FloatingPortal as D, FloatingFocusManager as S } from "../../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import H from "../../../../../../../external/classnames/index.es.js";
-import A, { useState as P } from "react";
-import { Link as R } from "../../../../navigation/link/link.es.js";
+import { jsxs as d, Fragment as N, jsx as a } from "react/jsx-runtime";
+import { useFloating as k, useInteractions as F, useClick as x, useDismiss as D, FloatingOverlay as S, FloatingPortal as H, FloatingFocusManager as R } from "../../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import A from "../../../../../../../external/classnames/index.es.js";
+import E, { useState as L } from "react";
+import { Link as P } from "../../../../navigation/link/link.es.js";
 import n from "./sidenav-dropdown.module.scss.es.js";
 import { autoUpdate as j } from "../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as E, flip as G } from "../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const J = ({
-  trigger: f,
+import { offset as G, flip as K } from "../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useLabels as M } from "../../../../../providers/label-provider/use-labels.es.js";
+const V = ({
+  trigger: v,
   groups: h,
-  onOpenChange: o
+  onOpenChange: l
 }) => {
-  const [l, c] = P(!1), { refs: p, floatingStyles: v, context: m } = I({
-    open: l,
-    middleware: [E({ mainAxis: 8 }), G()],
+  const { getLabel: b } = M(), [c, o] = L(!1), { refs: u, floatingStyles: _, context: m } = k({
+    open: c,
+    middleware: [G({ mainAxis: 8 }), K()],
     whileElementsMounted: j,
     placement: "right-start",
     onOpenChange: (e) => {
-      c(e), o == null || o(e);
+      o(e), l == null || l(e);
     },
     strategy: "fixed"
-  }), { getReferenceProps: _, getFloatingProps: g } = N([F(m), k(m)]), u = (e) => {
-    var i;
-    const r = e.subItemGroups || e.subItems;
+  }), { getReferenceProps: g, getFloatingProps: w } = F([x(m), D(m)]), p = (e) => {
+    var f;
+    const s = e.subItemGroups || e.subItems, r = e.key || e.href || ((f = e.children) == null ? void 0 : f.toString());
     return /* @__PURE__ */ d(
       "li",
       {
         role: "none",
-        className: H(
+        className: A(
           n["tedi-sidenav-dropdown__item"],
-          r && n["tedi-sidenav-dropdown__item--has-children"]
+          s && n["tedi-sidenav-dropdown__item--has-children"]
         ),
         children: [
           /* @__PURE__ */ d(
-            R,
+            P,
             {
               ...e,
               role: "menuitem",
+              "aria-haspopup": s ? "true" : void 0,
+              "aria-expanded": s ? !1 : void 0,
+              "aria-controls": s ? `${r}-submenu` : void 0,
               className: n["tedi-sidenav-dropdown__link"],
               "data-active": e.isActive,
               "aria-current": e.isActive ? "page" : void 0,
               noStyle: !0,
-              onClick: (a) => {
+              onClick: (i) => {
                 var t;
-                (t = e.onClick) == null || t.call(e, a), c(!1);
+                (t = e.onClick) == null || t.call(e, i), o(!1);
               },
               children: [
                 e.children,
-                r && /* @__PURE__ */ s("span", { className: n["tedi-sidenav__bullet"] })
+                s && /* @__PURE__ */ a("span", { className: n["tedi-sidenav__bullet"] })
               ]
             }
           ),
-          r && /* @__PURE__ */ s("ul", { className: n["tedi-sidenav-dropdown__list"], role: "menu", children: (e.subItemGroups ?? (e.subItems ? [{ subItems: e.subItems }] : [])).map((a, t) => /* @__PURE__ */ d(A.Fragment, { children: [
-            a.subHeading && /* @__PURE__ */ s("div", { className: n["tedi-sidenav-dropdown__heading"], role: "presentation", children: a.subHeading }),
-            a.subItems.map((w) => u(w))
-          ] }, t)) })
+          s && /* @__PURE__ */ a(
+            "ul",
+            {
+              id: `${r}-submenu`,
+              className: n["tedi-sidenav-dropdown__list"],
+              role: "menu",
+              "aria-label": b("sidenav.submenu"),
+              children: (e.subItemGroups ?? (e.subItems ? [{ subItems: e.subItems }] : [])).map((i, t) => /* @__PURE__ */ d(E.Fragment, { children: [
+                i.subHeading && /* @__PURE__ */ a("div", { className: n["tedi-sidenav-dropdown__heading"], role: "presentation", children: i.subHeading }),
+                i.subItems.map((I) => p(I))
+              ] }, t))
+            }
+          )
         ]
       },
-      e.key || e.href || ((i = e.children) == null ? void 0 : i.toString())
+      r
     );
-  }, b = (e) => {
-    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c((r) => !r));
+  }, y = (e) => {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o((s) => !s)), e.key === "Escape" && (e.preventDefault(), o(!1), u.setReference(null));
   };
-  return /* @__PURE__ */ d(y, { children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ a(
       "div",
       {
-        ref: p.setReference,
-        ..._(),
+        ref: u.setReference,
+        ...g(),
         role: "button",
         tabIndex: -1,
         "aria-haspopup": "menu",
-        "aria-expanded": l,
-        onKeyDown: b,
-        children: f
+        "aria-expanded": c,
+        onKeyDown: y,
+        children: v
       }
     ),
-    l && /* @__PURE__ */ s(x, { children: /* @__PURE__ */ s(D, { children: /* @__PURE__ */ s(S, { context: m, modal: !1, children: /* @__PURE__ */ s(
+    c && /* @__PURE__ */ a(S, { children: /* @__PURE__ */ a(H, { children: /* @__PURE__ */ a(R, { context: m, modal: !1, children: /* @__PURE__ */ a(
       "div",
       {
-        ref: p.setFloating,
-        style: v,
+        ref: u.setFloating,
+        style: _,
         className: n["tedi-sidenav-dropdown"],
         role: "menu",
-        ...g(),
-        children: h.map((e, r) => /* @__PURE__ */ d("div", { className: n["tedi-sidenav-dropdown__group"], children: [
-          e.subHeading && /* @__PURE__ */ s("div", { className: n["tedi-sidenav-dropdown__heading"], role: "presentation", children: e.subHeading }),
-          /* @__PURE__ */ s("ul", { className: n["tedi-sidenav-dropdown__list"], role: "menu", children: e.subItems.map((i) => u(i)) })
-        ] }, r))
+        ...w(),
+        children: h.map((e, s) => /* @__PURE__ */ d("div", { className: n["tedi-sidenav-dropdown__group"], children: [
+          e.subHeading && /* @__PURE__ */ a("div", { className: n["tedi-sidenav-dropdown__heading"], role: "presentation", children: e.subHeading }),
+          /* @__PURE__ */ a("ul", { className: n["tedi-sidenav-dropdown__list"], role: "menu", children: e.subItems.map((r) => p(r)) })
+        ] }, s))
       }
     ) }) }) })
   ] });
 };
 export {
-  J as SideNavDropdown
+  V as SideNavDropdown
 };

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

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

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