@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.31

package/src/tedi/components/layout/{sidenav/components/sidenav-mobile/sidenav-mobile.es.js → mobile-nav/mobile-nav.es.js}

@@ -1,13 +1,13 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { FloatingOverlay as q } from "../../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import l from "../../../../../../../external/classnames/index.es.js";
+import { FloatingOverlay as q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import l from "../../../../../external/classnames/index.es.js";
 import D, { useState as J, useEffect as K } from "react";
-import { Icon as d } from "../../../../base/icon/icon.es.js";
-import { Button as v } from "../../../../buttons/button/button.es.js";
-import n from "../../sidenav.module.scss.es.js";
-import { SideNavItem as M } from "../sidenav-item/sidenav-item.es.js";
-import { useLabels as Q } from "../../../../../providers/label-provider/use-labels.es.js";
-const ne = ({
+import { Icon as d } from "../../base/icon/icon.es.js";
+import { Button as v } from "../../buttons/button/button.es.js";
+import { SideNavItem as w } from "../sidenav/components/sidenav-item/sidenav-item.es.js";
+import n from "../sidenav/sidenav.module.scss.es.js";
+import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
+const U = ({
   navItems: _,
   ariaLabel: x,
   linkAs: b,
@@ -17,12 +17,12 @@ const ne = ({
   id: R,
   className: B
 }) => {
-  var f, I, C, L, S, y, w;
+  var f, I, C, L, S, y, M;
   const { getLabel: p } = Q(), [s, c] = J([{ items: _ }]);
   K(() => {
     c([{ items: _ }]);
   }, [_]);
-  const t = s[s.length - 1], j = s.length === 1, k = (e) => {
+  const t = s[s.length - 1], j = s.length === 1, N = (e) => {
     var u;
     const a = !!(e.subItems || e.subItemGroups), m = !!(e.href || e.to);
     if (!a) {
@@ -42,8 +42,8 @@ const ne = ({
     c(s.slice(0, -1));
   }, F = () => {
     c([s[0]]);
-  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), N = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
-    M,
+  }, T = ((I = (f = t.parent) == null ? void 0 : f.subItems) == null ? void 0 : I.length) ?? ((L = (C = t.parent) == null ? void 0 : C.subItemGroups) == null ? void 0 : L.length), E = s.length > 1 && !(t.renderParentLink && T), k = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
+    w,
     {
       ...e,
       as: b,
@@ -51,7 +51,7 @@ const ne = ({
       onItemClick: o,
       className: l(n["tedi-sidenav__item--mobile"], e.className)
     }
-  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => k(e), className: n["tedi-sidenav__link"], children: [
+  ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"], n["tedi-sidenav__item--mobile"]), children: /* @__PURE__ */ r("button", { onClick: () => N(e), className: n["tedi-sidenav__link"], children: [
     e.icon && /* @__PURE__ */ i(
       d,
       {
@@ -65,7 +65,7 @@ const ne = ({
   ] }) }) : H(e, a), H = (e, a) => {
     const m = !!(e.href || e.to), h = !!(e.subItems || e.subItemGroups);
     return m ? /* @__PURE__ */ i(
-      M,
+      w,
       {
         ...e,
         as: b,
@@ -78,7 +78,7 @@ const ne = ({
       v,
       {
         noStyle: !0,
-        onClick: () => h ? k(e) : o(),
+        onClick: () => h ? N(e) : o(),
         className: n["tedi-sidenav__link"],
         children: [
           /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
@@ -120,10 +120,10 @@ const ne = ({
             }
           )
         ] }) }),
-        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (w = t.parent) == null ? void 0 : w.children }),
+        E && /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__subheading"], n["tedi-sidenav__subheading--mobile"]), children: (M = t.parent) == null ? void 0 : M.children }),
         /* @__PURE__ */ r("ul", { className: n["tedi-sidenav__list"], role: "menubar", children: [
-          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: N(t.parent, s.length) }) }),
-          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: N(e, s.length) }, e.id || a))
+          t.renderParentLink && t.parent && /* @__PURE__ */ i("li", { className: n["tedi-sidenav__list-item"], children: /* @__PURE__ */ i("div", { className: l(n["tedi-sidenav__collapse"]), children: k(t.parent, s.length) }) }),
+          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: k(e, s.length) }, e.id || a))
         ] })
       ]
     }
@@ -140,7 +140,8 @@ const ne = ({
       children: g
     }
   ) : g : null;
-};
+}, ie = U;
 export {
-  ne as SideNavMobile
+  U as MobileNav,
+  ie as SideNavMobile
 };

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"),k=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),D=require("../../../../navigation/link/link.cjs.js"),a=require("./sidenav-dropdown.module.scss.cjs.js"),q=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"),F=require("../../../../../providers/label-provider/use-labels.cjs.js"),S=({trigger:b,groups:g,onOpenChange:u,as:x})=>{const{getLabel:_}=F.useLabels(),[r,l]=m.useState(!1),{refs:c,floatingStyles:j,context:f}=d.useFloating({open:r,middleware:[h.offset({mainAxis:8}),h.flip()],whileElementsMounted:q.autoUpdate,placement:"right-start",onOpenChange:e=>{l(e),u==null||u(e)},strategy:"fixed"}),{getReferenceProps:w,getFloatingProps:y}=d.useInteractions([d.useClick(f),d.useDismiss(f)]),p=e=>{var v;const n=e.subItemGroups||e.subItems,t=e.key||e.href||((v=e.children)==null?void 0:v.toString());return s.jsxs("li",{role:"none",className:k.default(a.default["tedi-sidenav-dropdown__item"],n&&a.default["tedi-sidenav-dropdown__item--has-children"]),children:[s.jsxs(D.Link,{...e,role:"menuitem","aria-haspopup":n?"true":void 0,"aria-expanded":n?r: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 o;(o=e.onClick)==null||o.call(e,i),l(!1)},as:e.as??x,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":_("sidenav.submenu"),children:(e.subItemGroups??(e.subItems?[{subItems:e.subItems}]:[])).map((i,o)=>s.jsxs(m.Fragment,{children:[i.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:i.subHeading}),i.subItems.map(N=>p(N))]},o))})]},t)},I=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),l(n=>!n)),e.key==="Escape"&&(e.preventDefault(),l(!1),c.setReference(null))};return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:c.setReference,...w(),role:"button",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":r,onKeyDown:I,children:b}),r&&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:j,className:a.default["tedi-sidenav-dropdown"],role:"menu",...y(),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=S;
+"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"),k=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),D=require("../../../../navigation/link/link.cjs.js"),a=require("./sidenav-dropdown.module.scss.cjs.js"),q=require("../../../../../providers/label-provider/use-labels.cjs.js"),F=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"),S=({trigger:b,groups:g,onOpenChange:u,as:x})=>{const{getLabel:_}=q.useLabels(),[r,l]=m.useState(!1),{refs:c,floatingStyles:j,context:f}=d.useFloating({open:r,middleware:[h.offset({mainAxis:8}),h.flip()],whileElementsMounted:F.autoUpdate,placement:"right-start",onOpenChange:e=>{l(e),u==null||u(e)},strategy:"fixed"}),{getReferenceProps:w,getFloatingProps:y}=d.useInteractions([d.useClick(f),d.useDismiss(f)]),p=e=>{var v;const n=e.subItemGroups||e.subItems,t=e.key||e.href||((v=e.children)==null?void 0:v.toString());return s.jsxs("li",{role:"none",className:k.default(a.default["tedi-sidenav-dropdown__item"],n&&a.default["tedi-sidenav-dropdown__item--has-children"]),children:[s.jsxs(D.Link,{...e,role:"menuitem","aria-haspopup":n?"true":void 0,"aria-expanded":n?r: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 o;(o=e.onClick)==null||o.call(e,i),l(!1)},as:e.as??x,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":_("sidenav.submenu"),children:(e.subItemGroups??(e.subItems?[{subItems:e.subItems}]:[])).map((i,o)=>s.jsxs(m.Fragment,{children:[i.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:i.subHeading}),i.subItems.map(N=>p(N))]},o))})]},t)},I=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),l(n=>!n)),e.key==="Escape"&&(e.preventDefault(),l(!1),c.setReference(null))};return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:c.setReference,...w(),role:"button",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":r,onKeyDown:I,children:b}),r&&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:j,className:a.default["tedi-sidenav-dropdown"],role:"menu",...y(),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=S;

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

@@ -4,19 +4,19 @@ import E from "../../../../../../../external/classnames/index.es.js";
 import L, { useState as P } from "react";
 import { Link as j } from "../../../../navigation/link/link.es.js";
 import n from "./sidenav-dropdown.module.scss.es.js";
-import { autoUpdate as G } from "../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as K, flip as M } from "../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useLabels as $ } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useLabels as G } from "../../../../../providers/label-provider/use-labels.es.js";
+import { autoUpdate as K } from "../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as M, flip as $ } from "../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 const W = ({
   trigger: v,
   groups: h,
   onOpenChange: c,
   as: b
 }) => {
-  const { getLabel: _ } = $(), [o, t] = P(!1), { refs: u, floatingStyles: g, context: m } = F({
+  const { getLabel: _ } = G(), [o, t] = P(!1), { refs: u, floatingStyles: g, context: m } = F({
     open: o,
-    middleware: [K({ mainAxis: 8 }), M()],
-    whileElementsMounted: G,
+    middleware: [M({ mainAxis: 8 }), $()],
+    whileElementsMounted: K,
     placement: "right-start",
     onOpenChange: (e) => {
       t(e), c == null || c(e);

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

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

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

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

@@ -1,5 +1,5 @@
 export * from './sidenav';
 export * from './components/sidenav-dropdown/sidenav-dropdown';
 export * from './components/sidenav-item/sidenav-item';
-export * from './components/sidenav-toggle/sidenav-toggle';
-export * from './components/sidenav-mobile/sidenav-mobile';
+export * from '../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle';
+export * from '../mobile-nav/mobile-nav';

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("react"),L=require("../../../../../external/classnames/index.cjs.js"),V=require("../../misc/print/print.cjs.js"),F=require("./components/sidenav-dropdown/sidenav-dropdown.cjs.js"),N=require("./components/sidenav-item/sidenav-item.cjs.js"),O=require("./components/sidenav-mobile/sidenav-mobile.cjs.js"),q=require("./components/sidenav-toggle/sidenav-toggle.cjs.js"),l=require("./sidenav.module.scss.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),G=o=>{const{navItems:u,ariaLabel:r,linkAs:v,showDividers:h=!0,className:p,mobileBreakpoint:j="tablet",showMobileOverlay:k=!0,isMobileOpen:m,isCollapsed:w=!1,onMenuToggle:d,onCollapseToggle:c,sideNavItemSize:x="default",...b}=o,B=e=>({mobile:"md",tablet:"lg"})[e],_=C.useBreakpoint(),i=C.isBreakpointBelow(_,B(j)),t=m!==void 0,[y,f]=n.useState(!i),S=t?m:y,[D,T]=n.useState(w),a=i?!1:D,E="isCollapsed"in o;n.useEffect(()=>{t||f(!i)},[i,t]);const P=e=>{T(e),c==null||c(e)},R=()=>{P(!a)},g=e=>{t||f(e),d==null||d(e)},z=()=>{g(!S)},A=L.default(l.default["tedi-sidenav"],p,{[l.default["tedi-sidenav--has-dividers"]]:h,[l.default["tedi-sidenav--collapsed"]]:a});return i?s.jsx(O.SideNavMobile,{navItems:u,ariaLabel:r,linkAs:v,isOpen:S,onClose:()=>g(!1),showOverlay:k,className:p,...b}):s.jsx(V.Print,{visibility:"hide",children:s.jsxs("nav",{id:o.id,"data-name":"sidenav",...b,className:A,"aria-label":r,children:[E&&s.jsx(q.SidenavToggle,{menuOpen:!a,toggleMenu:R,variant:"collapse"}),s.jsx("ul",{className:l.default["tedi-sidenav__list"],role:"menubar","aria-label":r,children:u.map((e,M)=>n.createElement(N.SideNavItem,{as:v,...e,key:M,onItemClick:z,isCollapsed:a,sideNavItemSize:x}))})]})})},I=Object.assign(G,{Toggle:q.SidenavToggle,Item:N.SideNavItem,Dropdown:F.SideNavDropdown,Mobile:O.SideNavMobile});exports.SideNav=I;exports.default=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),A=require("../../../../../external/classnames/index.cjs.js"),L=require("../../misc/print/print.cjs.js"),O=require("../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.cjs.js"),S=require("../mobile-nav/mobile-nav.cjs.js"),V=require("./components/sidenav-dropdown/sidenav-dropdown.cjs.js"),q=require("./components/sidenav-item/sidenav-item.cjs.js"),l=require("./sidenav.module.scss.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),F=o=>{const{navItems:u,ariaLabel:r,linkAs:v,showDividers:I=!0,className:m,mobileBreakpoint:h="tablet",showMobileOverlay:j=!0,isMobileOpen:p,isCollapsed:w=!1,onMenuToggle:d,onCollapseToggle:c,sideNavItemSize:k="default",...b}=o,x=e=>({mobile:"md",tablet:"lg"})[e],B=C.default(),i=C.isBreakpointBelow(B,x(h)),t=p!==void 0,[y,f]=n.useState(!i),N=t?p:y,[D,T]=n.useState(w),a=i?!1:D,E="isCollapsed"in o;n.useEffect(()=>{t||f(!i)},[i,t]);const P=e=>{T(e),c==null||c(e)},_=()=>{P(!a)},g=e=>{t||f(e),d==null||d(e)},R=()=>{g(!N)},z=A.default(l.default["tedi-sidenav"],m,{[l.default["tedi-sidenav--has-dividers"]]:I,[l.default["tedi-sidenav--collapsed"]]:a});return i?s.jsx(S.MobileNav,{navItems:u,ariaLabel:r,linkAs:v,isOpen:N,onClose:()=>g(!1),showOverlay:j,className:m,...b}):s.jsx(L.Print,{visibility:"hide",children:s.jsxs("nav",{id:o.id,"data-name":"sidenav",...b,className:z,"aria-label":r,children:[E&&s.jsx(O.MobileNavToggle,{menuOpen:!a,toggleMenu:_,variant:"collapse"}),s.jsx("ul",{className:l.default["tedi-sidenav__list"],role:"menubar","aria-label":r,children:u.map((e,M)=>n.createElement(q.SideNavItem,{as:v,...e,key:M,onItemClick:R,isCollapsed:a,sideNavItemSize:k}))})]})})},G=Object.assign(F,{Toggle:O.MobileNavToggle,Item:q.SideNavItem,Dropdown:V.SideNavDropdown,Mobile:S.MobileNav});exports.SideNav=G;

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

@@ -80,7 +80,7 @@ export type SideNavProps<C extends React.ElementType = 'a'> = ConditionalTypes<C
     sideNavItemSize?: SideNavItemSize;
 };
 export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNavProps<C>) => React.ReactElement | null) & {
-    Toggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, className, }: import('./components/sidenav-toggle/sidenav-toggle').SidenavToggleProps) => import("react/jsx-runtime").JSX.Element;
+    Toggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: import('.').MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
     Item: <C extends React.ElementType = "a">(props: SideNavItemProps<C> & {
         onItemClick?: () => void;
         level?: number;
@@ -95,15 +95,6 @@ export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNa
         onOpenChange?: (isOpen: boolean) => void;
         as?: C | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    Mobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: {
-        navItems: SideNavItemProps<C>[];
-        ariaLabel: string;
-        linkAs?: C | undefined;
-        isOpen: boolean;
-        onClose: () => void;
-        showOverlay?: boolean;
-        id?: string;
-        className?: string;
-    }) => import("react/jsx-runtime").JSX.Element | null;
+    Mobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: import('.').MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default SideNav;