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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.4.0-rc.10",
+  "version": "14.4.0-rc.12",
   "type": "module",
   "sideEffects": false,
   "exports": {

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

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

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

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

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

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;