@tedi-design-system/react 17.2.0-rc.1 → 18.0.0-rc.10

package/src/tedi/components/form/time-field/time-field.es.js

@@ -1,59 +1,60 @@
-import { jsxs as O, jsx as i, Fragment as te } from "react/jsx-runtime";
-import { useFloating as ie, useClick as ne, useDismiss as oe, useRole as re, useInteractions as le, FloatingPortal as se, FloatingFocusManager as ae } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsxs as V, jsx as i, Fragment as ne } from "react/jsx-runtime";
+import { useFloating as oe, useClick as re, useDismiss as le, useRole as se, useInteractions as ae, FloatingPortal as de, FloatingFocusManager as ce } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import C from "../../../../../external/classnames/index.es.js";
-import ce, { useState as V, useEffect as E } from "react";
-import { TextField as U } from "../textfield/textfield.es.js";
-import { TimePicker as de } from "../time-picker/time-picker.es.js";
+import fe, { useState as E, useEffect as U } from "react";
+import { TextField as D } from "../textfield/textfield.es.js";
+import { TimePicker as me } from "../time-picker/time-picker.es.js";
 import l from "./time-field.module.scss.es.js";
-import { TIMEPICKER_OFFSET as fe, normalizeTime as ue } from "./time-field-helpers.es.js";
-import { autoUpdate as me } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as pe, flip as ge, shift as he } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useBreakpointProps as ke } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { normalizeTime as ue, TIMEPICKER_OFFSET as pe } from "./time-field-helpers.es.js";
+import { autoUpdate as ge } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as he, flip as ke, shift as ve } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useBreakpointProps as be } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { Dropdown as h } from "../../overlays/dropdown/dropdown.es.js";
-const ve = (k) => {
-  const { getCurrentBreakpointProps: D } = ke(k.defaultServerBreakpoint), {
-    id: M,
-    label: S,
+const xe = (k) => {
+  const { getCurrentBreakpointProps: M } = be(k.defaultServerBreakpoint), {
+    id: S,
+    label: j,
     value: c,
-    defaultValue: j,
+    defaultValue: q,
     onChange: v,
-    readOnly: d = !1,
-    required: q,
-    placeholder: z,
+    readOnly: I = !1,
+    disabled: s = !1,
+    required: z,
+    placeholder: A,
     inputProps: t,
-    stepMinutes: A = 1,
-    className: I,
-    availableTimes: s
+    stepMinutes: K = 1,
+    className: w,
+    availableTimes: a
   } = k, {
-    useNativePicker: K = !1,
-    timePickerTrigger: w = "button",
-    showPicker: a = !0,
-    availableTimesVariant: T = "grid-buttons"
-  } = D(k), P = c !== void 0, [G, N] = V(c ?? j ?? ""), u = P ? c : G, [x, _] = V(!1), F = w === "input", o = K, H = ie({
-    open: x,
-    onOpenChange: _,
-    placement: F ? "bottom-start" : "bottom-end",
-    middleware: [pe(fe), ge(), he()],
-    whileElementsMounted: me
-  }), { refs: b, context: m, x: J, y: L, strategy: Q } = H, W = ne(m), X = oe(m), Y = re(m, { role: "listbox" }), y = a && F && !d && !o, R = le([...y ? [W] : [], X, Y]), p = (e) => {
+    useNativePicker: G = !1,
+    timePickerTrigger: T = "button",
+    showPicker: d = !0,
+    availableTimesVariant: N = "grid-buttons"
+  } = M(k), y = c !== void 0, [H, P] = E(c ?? q ?? ""), m = y ? c : H, [b, x] = E(!1), _ = T === "input", o = G, J = oe({
+    open: b,
+    onOpenChange: x,
+    placement: _ ? "bottom-start" : "bottom-end",
+    middleware: [he(pe), ke(), ve()],
+    whileElementsMounted: ge
+  }), { refs: F, context: u, x: L, y: Q, strategy: W } = J, X = re(u), Y = le(u), Z = se(u, { role: "listbox" }), R = d && _ && !I && !s && !o, B = ae([...R ? [X] : [], Y, Z]), p = (e) => {
     const n = e.trim();
-    P || N(n), v == null || v(n);
-  }, Z = (e) => {
+    y || P(n), v == null || v(n);
+  }, $ = (e) => {
     var g;
     const n = e.target.value ?? "";
     (g = t == null ? void 0 : t.onBlur) == null || g.call(t, e);
     const r = ue(n);
     r !== null && r !== n && p(r);
   };
-  E(() => {
-    c !== void 0 && N(c);
+  U(() => {
+    c !== void 0 && P(c);
   }, [c]);
-  const f = ce.useRef(null);
-  E(() => {
+  const f = fe.useRef(null);
+  U(() => {
     var e;
-    (e = f.current) != null && e.inner && b.setReference(f.current.inner);
-  }, [b]);
-  const $ = () => {
+    (e = f.current) != null && e.inner && F.setReference(f.current.inner);
+  }, [F]);
+  const ee = () => {
     var n;
     const e = (n = f.current) == null ? void 0 : n.input;
     if (e) {
@@ -63,25 +64,26 @@ const ve = (k) => {
       }
       e.focus();
     }
-  }, ee = () => _((e) => !e), B = {
+  }, te = () => x((e) => !e), ie = () => {
+    !d || s || (o ? ee() : T === "button" && te());
+  }, O = {
     ...t,
-    id: M,
-    label: S,
-    value: u,
-    placeholder: z,
-    readOnly: d || !o && F,
+    id: S,
+    label: j,
+    value: m,
+    placeholder: A,
+    readOnly: I || !o && _,
+    disabled: s || (t == null ? void 0 : t.disabled),
     icon: "schedule",
     isClearable: !0,
-    required: q,
-    onIconClick: () => {
-      d || !a || (o ? $() : w === "button" && ee());
-    },
+    required: z,
+    onIconClick: ie,
     onChange: p,
-    onBlur: Z,
+    onBlur: $,
     className: C(
       l["tedi-time-field__textfield"],
-      { [l["tedi-time-field__icon--disabled"]]: !a || d },
-      { [l["tedi-time-field__textfield--disabled"]]: t == null ? void 0 : t.disabled },
+      { [l["tedi-time-field__icon--disabled"]]: !d || s },
+      { [l["tedi-time-field__textfield--disabled"]]: s || (t == null ? void 0 : t.disabled) },
       { [l["tedi-time-field--native"]]: o }
     ),
     input: {
@@ -89,53 +91,53 @@ const ve = (k) => {
       ...o && { type: "time" }
     }
   };
-  if (!o && a && !d && T === "dropdown" && !!(s != null && s.length)) {
-    const e = s.indexOf(u), n = e >= 0 ? e : 0;
-    return /* @__PURE__ */ O(h, { width: "trigger", defaultActiveIndex: n, children: [
+  if (!o && d && !s && N === "dropdown" && !!(a != null && a.length)) {
+    const e = a.indexOf(m), n = e >= 0 ? e : 0;
+    return /* @__PURE__ */ V(h, { width: "trigger", defaultActiveIndex: n, children: [
       /* @__PURE__ */ i(h.Trigger, { children: /* @__PURE__ */ i(
         "div",
         {
-          className: C(l["tedi-time-field__container"], I, {
+          className: C(l["tedi-time-field__container"], w, {
             [l["tedi-time-field__container--native"]]: o
           }),
-          children: /* @__PURE__ */ i(U, { ref: f, ...B })
+          children: /* @__PURE__ */ i(D, { ref: f, ...O })
         }
       ) }),
-      /* @__PURE__ */ i(h.Content, { children: s.map((r, g) => /* @__PURE__ */ i(h.Item, { index: g, active: r === u, onClick: () => p(r), children: r }, r)) })
+      /* @__PURE__ */ i(h.Content, { children: a.map((r, g) => /* @__PURE__ */ i(h.Item, { index: g, active: r === m, onClick: () => p(r), children: r }, r)) })
     ] });
   }
-  return /* @__PURE__ */ O(te, { children: [
+  return /* @__PURE__ */ V(ne, { children: [
     /* @__PURE__ */ i(
       "div",
       {
-        className: C(l["tedi-time-field__container"], I),
-        ...y ? R.getReferenceProps() : {},
-        "aria-haspopup": a ? "listbox" : void 0,
+        className: C(l["tedi-time-field__container"], w),
+        ...R ? B.getReferenceProps() : {},
+        "aria-haspopup": d ? "listbox" : void 0,
         tabIndex: -1,
-        children: /* @__PURE__ */ i(U, { ref: f, "aria-expanded": a ? x : void 0, ...B })
+        children: /* @__PURE__ */ i(D, { ref: f, "aria-expanded": d ? b : void 0, ...O })
       }
     ),
-    !o && a && /* @__PURE__ */ i(se, { children: x && !d && /* @__PURE__ */ i(ae, { context: m, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
+    !o && d && !s && /* @__PURE__ */ i(de, { children: b && /* @__PURE__ */ i(ce, { context: u, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
       "div",
       {
-        ref: b.setFloating,
-        ...R.getFloatingProps({
+        ref: F.setFloating,
+        ...B.getFloatingProps({
           style: {
-            position: Q,
-            top: L ?? 0,
-            left: J ?? 0
+            position: W,
+            top: Q ?? 0,
+            left: L ?? 0
           }
         }),
         children: /* @__PURE__ */ i(
-          de,
+          me,
           {
-            value: u,
-            stepMinutes: A,
-            availableTimes: s,
+            value: m,
+            stepMinutes: K,
+            availableTimes: a,
             onChange: (e) => {
-              p(e), s && _(!1);
+              p(e), a && x(!1);
             },
-            gridVariant: T === "grid-radio" ? "radio" : "button",
+            gridVariant: N === "grid-radio" ? "radio" : "button",
             className: l["tedi-time-field__picker-wrapper"]
           }
         )
@@ -143,7 +145,7 @@ const ve = (k) => {
     ) }) })
   ] });
 };
-ve.displayName = "TimeField";
+xe.displayName = "TimeField";
 export {
-  ve as TimeField
+  xe as TimeField
 };

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.cjs.js

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

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { UnknownType } from '../../../../../types/commonTypes';
+export type MobileNavToggleVariant = 'mobile' | 'collapse';
+export type MobileNavToggleProps = {
+    /**
+     * Is the menu open (for mobile) or expanded (for collapse)
+     */
+    menuOpen: boolean;
+    /**
+     * Toggle open/collapse state
+     */
+    toggleMenu: (open: boolean) => void;
+    /**
+     * Optional ref to attach to button (for floating UI etc.)
+     */
+    referenceRef?: React.Ref<UnknownType>;
+    /**
+     * Optional props passed from floating UI
+     */
+    getReferenceProps?: () => UnknownType;
+    /**
+     * Variant of toggle (mobile overlay or collapse control)
+     */
+    variant?: MobileNavToggleVariant;
+    /**
+     * Show the open/close label visibly below the icon (mobile variant only).
+     * The label text comes from the `header.toggle` i18n key by default — pass
+     * `label` to override it. When `false` (default), the button renders
+     * icon-only and the label is still exposed as accessible text.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Override the toggle's label text. Accepts a static `ReactNode` (used for
+     * both states) or a function that returns a `ReactNode` for the current
+     * `menuOpen` state (e.g. `(open) => open ? 'Sulge' : 'Menüü'`). When
+     * omitted, the label falls back to the `header.toggle` i18n value.
+     */
+    label?: React.ReactNode | ((menuOpen: boolean) => React.ReactNode);
+    /**
+     * Add custom class to override styles
+     */
+    className?: string;
+};
+export declare const MobileNavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `MobileNavToggle` — same component, vendor-neutral name. */
+export declare const SidenavToggle: ({ menuOpen, toggleMenu, referenceRef, getReferenceProps, variant, showLabel, label, className, }: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use `MobileNavToggleProps`. */
+export type SidenavToggleProps = MobileNavToggleProps;
+/** @deprecated Use `MobileNavToggleVariant`. */
+export type SidenavToggleVariant = MobileNavToggleVariant;
+export default MobileNavToggle;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.es.js

@@ -0,0 +1,68 @@
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import h from "../../../../../../../external/classnames/index.es.js";
+import { Icon as N } from "../../../../base/icon/icon.es.js";
+import { Button as u } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as v } from "../../../../buttons/floating-button/floating-button.es.js";
+import l from "./mobile-nav-toggle.module.scss.es.js";
+import { useLabels as L } from "../../../../../providers/label-provider/use-labels.es.js";
+const k = ({
+  menuOpen: o,
+  toggleMenu: s,
+  referenceRef: c,
+  getReferenceProps: n = () => ({}),
+  variant: e = "mobile",
+  showLabel: b = !1,
+  label: t,
+  className: f
+}) => {
+  const { getLabel: y } = L(), m = t !== void 0 ? typeof t == "function" ? t(o) : t : y("header.toggle", o), r = e === "collapse" ? o ? "right_panel_open" : "left_panel_open" : o ? "close" : "menu", g = b && e === "mobile", d = h(
+    l["tedi-mobile-nav-toggle"],
+    {
+      [l["tedi-mobile-nav-toggle--open"]]: o,
+      [l[`tedi-mobile-nav-toggle--${e}`]]: !0,
+      [l["tedi-mobile-nav-toggle--with-label"]]: g
+    },
+    f
+  ), p = (i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s(!o));
+  };
+  return g ? /* @__PURE__ */ _(
+    "button",
+    {
+      ...n(),
+      ref: c,
+      type: "button",
+      "aria-expanded": o,
+      className: d,
+      onClick: () => s(!o),
+      onKeyDown: p,
+      children: [
+        /* @__PURE__ */ a(N, { name: r, size: 24, className: l["tedi-mobile-nav-toggle__icon"], color: "inherit" }),
+        /* @__PURE__ */ a("span", { className: l["tedi-mobile-nav-toggle__label"], children: m })
+      ]
+    }
+  ) : /* @__PURE__ */ a(
+    e === "collapse" ? v : u,
+    {
+      ...n(),
+      ref: c,
+      icon: {
+        name: r,
+        className: l["tedi-mobile-nav-toggle__icon"],
+        size: e === "collapse" ? 18 : 24
+      },
+      visualType: e === "collapse" ? "secondary" : "primary",
+      className: d,
+      onClick: () => s(!o),
+      onKeyDown: p,
+      position: e === "collapse" ? "absolute" : "static",
+      size: e === "collapse" ? "small" : "",
+      children: m
+    }
+  );
+}, j = k;
+export {
+  k as MobileNavToggle,
+  j as SidenavToggle,
+  k as default
+};

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-mobile-nav-toggle":"tedi-mobile-nav-toggle-923946d1","tedi-mobile-nav-toggle--collapse":"tedi-mobile-nav-toggle--collapse-4434a2d6","tedi-mobile-nav-toggle--with-label":"tedi-mobile-nav-toggle--with-label-703a307f","tedi-mobile-nav-toggle__label":"tedi-mobile-nav-toggle__label-9cd8a16e"};exports.default=e;

package/src/tedi/components/layout/mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle.module.scss.es.js

@@ -0,0 +1,9 @@
+const e = {
+  "tedi-mobile-nav-toggle": "tedi-mobile-nav-toggle-923946d1",
+  "tedi-mobile-nav-toggle--collapse": "tedi-mobile-nav-toggle--collapse-4434a2d6",
+  "tedi-mobile-nav-toggle--with-label": "tedi-mobile-nav-toggle--with-label-703a307f",
+  "tedi-mobile-nav-toggle__label": "tedi-mobile-nav-toggle__label-9cd8a16e"
+};
+export {
+  e as default
+};

package/src/tedi/components/layout/mobile-nav/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mobile-nav';
+export * from './components/mobile-nav-toggle/mobile-nav-toggle';

package/src/tedi/components/layout/mobile-nav/mobile-nav.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),U=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),l=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),d=require("../../base/icon/icon.cjs.js"),f=require("../../buttons/button/button.cjs.js"),M=require("../sidenav/components/sidenav-item/sidenav-item.cjs.js"),n=require("../sidenav/sidenav.module.scss.cjs.js"),D=require("../../../providers/label-provider/use-labels.cjs.js"),q=({navItems:h,ariaLabel:y,linkAs:v,isOpen:w,onClose:r,showOverlay:B=!0,id:G,className:P})=>{var k,g,p,I,S,C,L;const{getLabel:b}=D.useLabels(),[s,c]=m.useState([{items:h}]);m.useEffect(()=>{c([{items:h}])},[h]);const a=s[s.length-1],R=s.length===1,x=e=>{var _;const i=!!(e.subItems||e.subItemGroups),o=!!(e.href||e.to);if(!i){r();return}const u=((_=e.subItemGroups)==null?void 0:_.flatMap(H=>H.subItems))||e.subItems||[];c([...s,{items:u,parent:e,renderParentLink:o}])},T=()=>{c(s.slice(0,-1))},z=()=>{c([s[0]])},F=((g=(k=a.parent)==null?void 0:k.subItems)==null?void 0:g.length)??((I=(p=a.parent)==null?void 0:p.subItemGroups)==null?void 0:I.length),O=s.length>1&&!(a.renderParentLink&&F),N=(e,i)=>i===1?!(e.subItems||e.subItemGroups)?t.jsx(M.SideNavItem,{...e,as:v,level:i,onItemClick:r,className:l.default(n.default["tedi-sidenav__item--mobile"],e.className)}):t.jsx("li",{className:l.default(n.default["tedi-sidenav__item"],n.default["tedi-sidenav__item--mobile"]),children:t.jsxs("button",{onClick:()=>x(e),className:n.default["tedi-sidenav__link"],children:[e.icon&&t.jsx(d.Icon,{name:typeof e.icon=="string"?e.icon:e.icon.name,color:"white",className:n.default["tedi-sidenav__icon"]}),t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),t.jsx(d.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]})]})}):E(e,i),E=(e,i)=>{const o=!!(e.href||e.to),u=!!(e.subItems||e.subItemGroups);return o?t.jsx(M.SideNavItem,{...e,as:v,level:i,icon:void 0,onItemClick:r,className:l.default(n.default["tedi-sidenav__sub-item"],e.className)}):t.jsx("li",{className:l.default(n.default["tedi-sidenav__item"]),children:t.jsxs(f.Button,{noStyle:!0,onClick:()=>u?x(e):r(),className:n.default["tedi-sidenav__link"],children:[t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),u?t.jsx(d.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]}):null]})})},j=t.jsxs("nav",{"data-name":"mobile-sidenav",className:l.default(n.default["tedi-sidenav"],n.default["tedi-sidenav--mobile"],P),"aria-label":y,id:G,children:[t.jsx("div",{className:n.default["tedi-sidenav__list"],children:!R&&t.jsxs("div",{className:n.default["tedi-sidenav__back-buttons"],children:[s.length>1&&t.jsxs(f.Button,{noStyle:!0,onClick:z,className:l.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(d.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:b("sidenav.backToMainMenu")})]}),s.length>2&&t.jsxs(f.Button,{noStyle:!0,onClick:T,className:l.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(d.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:((C=(S=s[s.length-1])==null?void 0:S.parent)==null?void 0:C.children)+" "+b("sidenav.backtoMenu")})]})]})}),O&&t.jsx("div",{className:l.default(n.default["tedi-sidenav__subheading"],n.default["tedi-sidenav__subheading--mobile"]),children:(L=a.parent)==null?void 0:L.children}),t.jsxs("ul",{className:n.default["tedi-sidenav__list"],role:"menubar",children:[a.renderParentLink&&a.parent&&t.jsx("li",{className:n.default["tedi-sidenav__list-item"],children:t.jsx("div",{className:l.default(n.default["tedi-sidenav__collapse"]),children:N(a.parent,s.length)})}),!a.renderParentLink&&a.items.map((e,i)=>t.jsx(m.Fragment,{children:N(e,s.length)},e.id||i))]})]});return w?B?t.jsx(U.FloatingOverlay,{style:{top:"0",position:"relative",height:"100%"},className:n.default["tedi-sidenav__overlay"],children:j}):j:null},J=q;exports.MobileNav=q;exports.SideNavMobile=J;

package/src/tedi/components/layout/mobile-nav/mobile-nav.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SideNavItemProps } from '../sidenav/components/sidenav-item/sidenav-item';
+export type MobileNavProps<C extends React.ElementType = 'a'> = {
+    navItems: SideNavItemProps<C>[];
+    ariaLabel: string;
+    linkAs?: C;
+    isOpen: boolean;
+    onClose: () => void;
+    showOverlay?: boolean;
+    id?: string;
+    className?: string;
+};
+export declare const MobileNav: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated Use `MobileNav` (same component, vendor-neutral name). Kept for
+ * backward compatibility with the `SideNav.Mobile` sub-component alias.
+ */
+export declare const SideNavMobile: <C extends React.ElementType = "a">({ navItems, ariaLabel, linkAs, isOpen, onClose, showOverlay, id, className, }: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
+/** @deprecated Use `MobileNavProps`. */
+export type SideNavMobileProps<C extends React.ElementType = 'a'> = MobileNavProps<C>;

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/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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("react"),L=require("../../../../../external/classnames/index.cjs.js"),V=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"),F=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"),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(),s=C.isBreakpointBelow(_,B(j)),t=m!==void 0,[y,f]=n.useState(!s),N=t?m:y,[D,T]=n.useState(w),a=s?!1:D,E="isCollapsed"in o;n.useEffect(()=>{t||f(!s)},[s,t]);const P=e=>{T(e),c==null||c(e)},R=()=>{P(!a)},g=e=>{t||f(e),d==null||d(e)},z=()=>{g(!N)},A=L.default(l.default["tedi-sidenav"],p,{[l.default["tedi-sidenav--has-dividers"]]:h,[l.default["tedi-sidenav--collapsed"]]:a});return s?i.jsx(S.MobileNav,{navItems:u,ariaLabel:r,linkAs:v,isOpen:N,onClose:()=>g(!1),showOverlay:k,className:p,...b}):i.jsx(V.Print,{visibility:"hide",children:i.jsxs("nav",{id:o.id,"data-name":"sidenav",...b,className:A,"aria-label":r,children:[E&&i.jsx(O.MobileNavToggle,{menuOpen:!a,toggleMenu:R,variant:"collapse"}),i.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:z,isCollapsed:a,sideNavItemSize:x}))})]})})},I=Object.assign(G,{Toggle:O.MobileNavToggle,Item:q.SideNavItem,Dropdown:F.SideNavDropdown,Mobile:S.MobileNav});exports.SideNav=I;exports.default=I;

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('../mobile-nav/components/mobile-nav-toggle/mobile-nav-toggle').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('../mobile-nav/mobile-nav').MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default SideNav;