@tedi-design-system/react 19.1.0-rc.2 → 19.1.0-rc.20

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

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

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

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

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

@@ -44,7 +44,7 @@ export type MobileNavToggleProps = {
 };
 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;
+export declare const SidenavToggle: (props: MobileNavToggleProps) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated Use `MobileNavToggleProps`. */
 export type SidenavToggleProps = MobileNavToggleProps;
 /** @deprecated Use `MobileNavToggleVariant`. */

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

@@ -1,21 +1,22 @@
-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 { jsxs as _, jsx as s } from "react/jsx-runtime";
+import N from "../../../../../../../external/classnames/index.es.js";
+import { warnDeprecated as h } from "../../../../../helpers/warn-deprecated/warn-deprecated.es.js";
+import { Icon as u } from "../../../../base/icon/icon.es.js";
+import { Button as v } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as w } 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 = ({
+import { useLabels as D } from "../../../../../providers/label-provider/use-labels.es.js";
+const L = ({
   menuOpen: o,
-  toggleMenu: s,
-  referenceRef: c,
-  getReferenceProps: n = () => ({}),
+  toggleMenu: i,
+  referenceRef: n,
+  getReferenceProps: c = () => ({}),
   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(
+  const { getLabel: y } = D(), 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 = N(
     l["tedi-mobile-nav-toggle"],
     {
       [l["tedi-mobile-nav-toggle--open"]]: o,
@@ -23,29 +24,29 @@ const k = ({
       [l["tedi-mobile-nav-toggle--with-label"]]: g
     },
     f
-  ), p = (i) => {
-    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s(!o));
+  ), p = (a) => {
+    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), i(!o));
   };
   return g ? /* @__PURE__ */ _(
     "button",
     {
-      ...n(),
-      ref: c,
+      ...c(),
+      ref: n,
       type: "button",
       "aria-expanded": o,
       className: d,
-      onClick: () => s(!o),
+      onClick: () => i(!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__ */ s(u, { name: r, size: 24, className: l["tedi-mobile-nav-toggle__icon"], color: "inherit" }),
+        /* @__PURE__ */ s("span", { className: l["tedi-mobile-nav-toggle__label"], children: m })
       ]
     }
-  ) : /* @__PURE__ */ a(
-    e === "collapse" ? v : u,
+  ) : /* @__PURE__ */ s(
+    e === "collapse" ? w : v,
     {
-      ...n(),
-      ref: c,
+      ...c(),
+      ref: n,
       icon: {
         name: r,
         className: l["tedi-mobile-nav-toggle__icon"],
@@ -53,16 +54,16 @@ const k = ({
       },
       visualType: e === "collapse" ? "secondary" : "primary",
       className: d,
-      onClick: () => s(!o),
+      onClick: () => i(!o),
       onKeyDown: p,
       position: e === "collapse" ? "absolute" : "static",
       size: e === "collapse" ? "small" : "",
       children: m
     }
   );
-}, j = k;
+}, S = (o) => (h("SidenavToggle", "Use `MobileNavToggle` (same component, vendor-neutral name)."), /* @__PURE__ */ s(L, { ...o }));
 export {
-  k as MobileNavToggle,
-  j as SidenavToggle,
-  k as default
+  L as MobileNavToggle,
+  S as SidenavToggle,
+  L as default
 };

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

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),K=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),c=require("../../../../../external/classnames/index.cjs.js"),u=require("react"),Q=require("../../../helpers/warn-deprecated/warn-deprecated.cjs.js"),_=require("../../base/icon/icon.cjs.js"),g=require("../../buttons/button/button.cjs.js"),E=require("../sidenav/components/sidenav-item/sidenav-item.cjs.js"),n=require("../sidenav/sidenav.module.scss.cjs.js"),V=require("../../../providers/label-provider/use-labels.cjs.js"),W=typeof window<"u"?u.useLayoutEffect:u.useEffect,X=d=>{let f=(d==null?void 0:d.parentElement)??null;for(;f;){const l=getComputedStyle(f);if(l.transform!=="none"||l.perspective!=="none"||l.filter!==""&&l.filter!=="none"||/\b(transform|perspective|filter)\b/.test(l.willChange)||/\b(layout|paint|strict|content)\b/.test(l.contain))return f;f=f.parentElement}return null},B=({navItems:d,ariaLabel:f,linkAs:l,isOpen:h,onClose:v,showOverlay:m=!0,id:T,className:z})=>{var w,S,C,L,M,q,R;const{getLabel:x}=V.useLabels(),[a,p]=u.useState([{items:d}]),N=u.useRef(null),[G,k]=u.useState("var(--layout-header-height)");u.useEffect(()=>{p([{items:d}])},[d]),W(()=>{if(!h||!m||typeof document>"u")return;const e=X(N.current),s=(e??document).querySelector("header")??document.querySelector("header");if(!s){k("var(--layout-header-height)");return}const o=()=>{const b=e?e.getBoundingClientRect().top:0;k(`${Math.max(0,Math.round(s.getBoundingClientRect().bottom-b))}px`)};o(),window.addEventListener("resize",o);let i;return typeof ResizeObserver<"u"&&(i=new ResizeObserver(o),i.observe(s),e&&i.observe(e)),()=>{window.removeEventListener("resize",o),i==null||i.disconnect()}},[h,m]),u.useEffect(()=>{if(!h||!m||typeof document>"u")return;const{body:e}=document,s=e.style.overflow;return e.style.overflow="hidden",()=>{e.style.overflow=s}},[h,m]);const r=a[a.length-1],P=a.length===1,j=e=>{var b;const s=!!(e.subItems||e.subItemGroups),o=!!(e.href||e.to);if(!s){v();return}const i=((b=e.subItemGroups)==null?void 0:b.flatMap(J=>J.subItems))||e.subItems||[];p([...a,{items:i,parent:e,renderParentLink:o}])},D=()=>{p(a.slice(0,-1))},F=()=>{p([a[0]])},U=((S=(w=r.parent)==null?void 0:w.subItems)==null?void 0:S.length)??((L=(C=r.parent)==null?void 0:C.subItemGroups)==null?void 0:L.length),H=a.length>1&&!(r.renderParentLink&&U),y=(e,s)=>s===1?!(e.subItems||e.subItemGroups)?t.jsx(E.SideNavItem,{...e,as:l,level:s,onItemClick:v,className:c.default(n.default["tedi-sidenav__item--mobile"],e.className)}):t.jsx("li",{className:c.default(n.default["tedi-sidenav__item"],n.default["tedi-sidenav__item--mobile"]),children:t.jsxs("button",{onClick:()=>j(e),className:n.default["tedi-sidenav__link"],children:[e.icon&&t.jsx(_.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(_.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]})]})}):$(e,s),$=(e,s)=>{const o=!!(e.href||e.to),i=!!(e.subItems||e.subItemGroups);return o?t.jsx(E.SideNavItem,{...e,as:l,level:s,icon:void 0,onItemClick:v,className:c.default(n.default["tedi-sidenav__sub-item"],e.className)}):t.jsx("li",{className:c.default(n.default["tedi-sidenav__item"]),children:t.jsxs(g.Button,{noStyle:!0,onClick:()=>i?j(e):v(),className:n.default["tedi-sidenav__link"],children:[t.jsx("span",{className:n.default["tedi-sidenav__title"],children:e.children}),i?t.jsx(_.Icon,{name:"expand_more",color:"white",className:n.default["tedi-sidenav__toggle-icon"]}):null]})})},I=t.jsxs("nav",{"data-name":"mobile-sidenav",className:c.default(n.default["tedi-sidenav"],n.default["tedi-sidenav--mobile"],z),"aria-label":f,id:T,children:[t.jsx("div",{className:n.default["tedi-sidenav__list"],children:!P&&t.jsxs("div",{className:n.default["tedi-sidenav__back-buttons"],children:[a.length>1&&t.jsxs(g.Button,{noStyle:!0,onClick:F,className:c.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(_.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:x("sidenav.backToMainMenu")})]}),a.length>2&&t.jsxs(g.Button,{noStyle:!0,onClick:D,className:c.default(n.default["tedi-sidenav__link"],n.default["tedi-sidenav__back-button"]),children:[t.jsx(_.Icon,{name:"arrow_back",size:16,color:"white"}),t.jsx("span",{children:((q=(M=a[a.length-1])==null?void 0:M.parent)==null?void 0:q.children)+" "+x("sidenav.backtoMenu")})]})]})}),H&&t.jsx("div",{className:c.default(n.default["tedi-sidenav__subheading"],n.default["tedi-sidenav__subheading--mobile"]),children:(R=r.parent)==null?void 0:R.children}),t.jsxs("ul",{className:n.default["tedi-sidenav__list"],children:[r.renderParentLink&&r.parent&&t.jsx("li",{className:n.default["tedi-sidenav__list-item"],children:t.jsx("div",{className:c.default(n.default["tedi-sidenav__collapse"]),children:y(r.parent,a.length)})}),!r.renderParentLink&&r.items.map((e,s)=>t.jsx(u.Fragment,{children:y(e,a.length)},e.id||s))]})]});return h?m?t.jsx(K.FloatingOverlay,{ref:N,style:{top:G},className:n.default["tedi-sidenav__overlay"],onMouseDown:e=>{e.target===e.currentTarget&&v()},children:I}):I:null},Y=d=>(Q.warnDeprecated("SideNavMobile","Use `MobileNav` (same component, vendor-neutral name)."),t.jsx(B,{...d}));exports.MobileNav=B;exports.SideNavMobile=Y;

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

@@ -15,6 +15,6 @@ export declare const MobileNav: <C extends React.ElementType = "a">({ navItems,
  * @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;
+export declare const SideNavMobile: <C extends React.ElementType = "a">(props: MobileNavProps<C>) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated Use `MobileNavProps`. */
 export type SideNavMobileProps<C extends React.ElementType = 'a'> = MobileNavProps<C>;