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

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

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

package/src/tedi/helpers/warn-deprecated/warn-deprecated.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),i=new Set,o=(e,r)=>{process.env.NODE_ENV==="production"||i.has(e)||(i.add(e),console.warn(`[TEDI] ${e} is deprecated. ${r}`))},u=(e,r,d)=>{const t=c.forwardRef((n,a)=>(o(r,d),c.createElement(e,a?{...n,ref:a}:n))),{displayName:s,name:p}=e;return t.displayName=s??p,t};exports.warnDeprecated=o;exports.withDeprecationWarning=u;

package/src/tedi/helpers/warn-deprecated/warn-deprecated.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+/**
+ * Logs a deprecation warning once per component, outside production builds only.
+ * @internal
+ */
+export declare const warnDeprecated: (name: string, message: string) => void;
+/**
+ * Wraps a deprecated component so only the public export warns. Library code that renders the
+ * component imports the unwrapped one, so consumers are not warned about components they never used.
+ * @internal
+ */
+export declare const withDeprecationWarning: <T extends React.ElementType>(Component: T, name: string, message: string) => T;

package/src/tedi/helpers/warn-deprecated/warn-deprecated.es.js

@@ -0,0 +1,11 @@
+import c from "react";
+const d = /* @__PURE__ */ new Set(), p = (e, r) => {
+  process.env.NODE_ENV === "production" || d.has(e) || (d.add(e), console.warn(`[TEDI] ${e} is deprecated. ${r}`));
+}, f = (e, r, o) => {
+  const t = c.forwardRef((a, n) => (p(r, o), c.createElement(e, n ? { ...a, ref: n } : a))), { displayName: s, name: i } = e;
+  return t.displayName = s ?? i, t;
+};
+export {
+  p as warnDeprecated,
+  f as withDeprecationWarning
+};