@tedi-design-system/react 19.1.0-rc.8 → 19.1.0

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

@@ -1,147 +1,179 @@
-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 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 { SideNavItem as w } from "../sidenav/components/sidenav-item/sidenav-item.es.js";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+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 { 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 Q } from "../../../providers/label-provider/use-labels.es.js";
-const U = ({
-  navItems: _,
-  ariaLabel: x,
-  linkAs: b,
-  isOpen: G,
-  onClose: o,
-  showOverlay: P = !0,
-  id: R,
-  className: B
+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 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;
+}, ee = ({
+  navItems: r,
+  ariaLabel: u,
+  linkAs: o,
+  isOpen: h,
+  onClose: v,
+  showOverlay: f = !0,
+  id: P,
+  className: F
 }) => {
-  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, N = (e) => {
-    var u;
-    const a = !!(e.subItems || e.subItemGroups), m = !!(e.href || e.to);
-    if (!a) {
-      o();
+  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(() => {
+    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) {
+      w("var(--layout-header-height)");
       return;
     }
-    const h = ((u = e.subItemGroups) == null ? void 0 : u.flatMap((O) => O.subItems)) || e.subItems || [];
-    c([
+    const l = () => {
+      const _ = e ? e.getBoundingClientRect().top : 0;
+      w(`${Math.max(0, Math.round(i.getBoundingClientRect().bottom - _))}px`);
+    };
+    l(), window.addEventListener("resize", l);
+    let a;
+    return typeof ResizeObserver < "u" && (a = new ResizeObserver(l), a.observe(i), e && a.observe(e)), () => {
+      window.removeEventListener("resize", l), a == null || a.disconnect();
+    };
+  }, [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, 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 = ((_ = e.subItemGroups) == null ? void 0 : _.flatMap((K) => K.subItems)) || e.subItems || [];
+    b([
       ...s,
       {
-        items: h,
+        items: a,
         parent: e,
-        renderParentLink: m
+        renderParentLink: l
       }
     ]);
-  }, z = () => {
-    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), k = (e, a) => a === 1 ? !(e.subItems || e.subItemGroups) ? /* @__PURE__ */ i(
-    w,
+  }, D = () => {
+    b(s.slice(0, -1));
+  }, H = () => {
+    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: b,
-      level: a,
-      onItemClick: o,
-      className: l(n["tedi-sidenav__item--mobile"], e.className)
+      as: o,
+      level: i,
+      onItemClick: v,
+      className: c(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: () => N(e), className: n["tedi-sidenav__link"], children: [
-    e.icon && /* @__PURE__ */ i(
-      d,
+  ) : /* @__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(
+      p,
       {
         name: typeof e.icon == "string" ? e.icon : e.icon.name,
         color: "white",
         className: n["tedi-sidenav__icon"]
       }
     ),
-    /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
-    /* @__PURE__ */ i(d, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] })
-  ] }) }) : H(e, a), H = (e, a) => {
-    const m = !!(e.href || e.to), h = !!(e.subItems || e.subItemGroups);
-    return m ? /* @__PURE__ */ i(
-      w,
+    /* @__PURE__ */ t("span", { className: n["tedi-sidenav__title"], children: e.children }),
+    /* @__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: b,
-        level: a,
+        as: o,
+        level: i,
         icon: void 0,
-        onItemClick: o,
-        className: l(n["tedi-sidenav__sub-item"], e.className)
+        onItemClick: v,
+        className: c(n["tedi-sidenav__sub-item"], e.className)
       }
-    ) : /* @__PURE__ */ i("li", { className: l(n["tedi-sidenav__item"]), children: /* @__PURE__ */ r(
-      v,
+    ) : /* @__PURE__ */ t("li", { className: c(n["tedi-sidenav__item"]), children: /* @__PURE__ */ m(
+      g,
       {
         noStyle: !0,
-        onClick: () => h ? N(e) : o(),
+        onClick: () => a ? I(e) : v(),
         className: n["tedi-sidenav__link"],
         children: [
-          /* @__PURE__ */ i("span", { className: n["tedi-sidenav__title"], children: e.children }),
-          h ? /* @__PURE__ */ i(d, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] }) : null
+          /* @__PURE__ */ t("span", { className: n["tedi-sidenav__title"], children: e.children }),
+          a ? /* @__PURE__ */ t(p, { name: "expand_more", color: "white", className: n["tedi-sidenav__toggle-icon"] }) : null
         ]
       }
     ) });
-  }, g = /* @__PURE__ */ r(
+  }, L = /* @__PURE__ */ m(
     "nav",
     {
       "data-name": "mobile-sidenav",
-      className: l(n["tedi-sidenav"], n["tedi-sidenav--mobile"], B),
-      "aria-label": x,
-      id: R,
+      className: c(n["tedi-sidenav"], n["tedi-sidenav--mobile"], F),
+      "aria-label": u,
+      id: P,
       children: [
-        /* @__PURE__ */ i("div", { className: n["tedi-sidenav__list"], children: !j && /* @__PURE__ */ r("div", { className: n["tedi-sidenav__back-buttons"], children: [
-          s.length > 1 && /* @__PURE__ */ r(
-            v,
+        /* @__PURE__ */ t("div", { className: n["tedi-sidenav__list"], children: !q && /* @__PURE__ */ m("div", { className: n["tedi-sidenav__back-buttons"], children: [
+          s.length > 1 && /* @__PURE__ */ m(
+            g,
             {
               noStyle: !0,
-              onClick: F,
-              className: l(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
+              onClick: H,
+              className: c(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
               children: [
-                /* @__PURE__ */ i(d, { name: "arrow_back", size: 16, color: "white" }),
-                /* @__PURE__ */ i("span", { children: p("sidenav.backToMainMenu") })
+                /* @__PURE__ */ t(p, { name: "arrow_back", size: 16, color: "white" }),
+                /* @__PURE__ */ t("span", { children: N("sidenav.backToMainMenu") })
               ]
             }
           ),
-          s.length > 2 && /* @__PURE__ */ r(
-            v,
+          s.length > 2 && /* @__PURE__ */ m(
+            g,
             {
               noStyle: !0,
-              onClick: z,
-              className: l(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
+              onClick: D,
+              className: c(n["tedi-sidenav__link"], n["tedi-sidenav__back-button"]),
               children: [
-                /* @__PURE__ */ i(d, { name: "arrow_back", size: 16, color: "white" }),
-                /* @__PURE__ */ i("span", { children: ((y = (S = s[s.length - 1]) == null ? void 0 : S.parent) == null ? void 0 : y.children) + " " + p("sidenav.backtoMenu") })
+                /* @__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") })
               ]
             }
           )
         ] }) }),
-        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: k(t.parent, s.length) }) }),
-          !t.renderParentLink && t.items.map((e, a) => /* @__PURE__ */ i(D.Fragment, { children: k(e, s.length) }, e.id || a))
+        $ && /* @__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: [
+          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 G ? P ? /* @__PURE__ */ i(
-    q,
+  return h ? f ? /* @__PURE__ */ t(
+    Q,
     {
-      style: {
-        top: "0",
-        position: "relative",
-        height: "100%"
-      },
+      ref: y,
+      style: { top: j },
       className: n["tedi-sidenav__overlay"],
-      children: g
+      onMouseDown: (e) => {
+        e.target === e.currentTarget && v();
+      },
+      children: L
     }
-  ) : g : null;
-}, ie = U;
+  ) : L : null;
+}, ue = (r) => (Y("SideNavMobile", "Use `MobileNav` (same component, vendor-neutral name)."), /* @__PURE__ */ t(ee, { ...r }));
 export {
-  U as MobileNav,
-  ie as SideNavMobile
+  ee as MobileNav,
+  ue as SideNavMobile
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav":"tedi-sidenav-8ef80858","tedi-sidenav__collapse":"tedi-sidenav__collapse-2c595f9e","tedi-sidenav__item":"tedi-sidenav__item-919825a5","tedi-sidenav--has-dividers":"tedi-sidenav--has-dividers-ceb44380","tedi-sidenav__link":"tedi-sidenav__link-e66a922a","tedi-sidenav--collapsed":"tedi-sidenav--collapsed-b7b406f9","tedi-sidenav__title":"tedi-sidenav__title-3bec8b71","tedi-sidenav__bullet":"tedi-sidenav__bullet-c51cd2ba","tedi-sidenav__link--active":"tedi-sidenav__link--active-cf22fc56","tedi-sidenav__item--has-children":"tedi-sidenav__item--has-children-71df3699","tedi-sidenav__toggle-icon":"tedi-sidenav__toggle-icon-63662692","tedi-sidenav__overlay":"tedi-sidenav__overlay-5feeb550","tedi-sidenav__item--level-2":"tedi-sidenav__item--level-2-3ed1a7e8","tedi-sidenav__list":"tedi-sidenav__list-58d1ae41","tedi-sidenav__item--with-tree":"tedi-sidenav__item--with-tree-39198d0d","tedi-sidenav__sub-item":"tedi-sidenav__sub-item-c714d866","tedi-sidenav__link--has-children-link":"tedi-sidenav__link--has-children-link-1d49019f","tedi-sidenav__link-collapse-wrapper":"tedi-sidenav__link-collapse-wrapper-cd74f534","tedi-sidenav__item--mobile":"tedi-sidenav__item--mobile-6571c3cc","tedi-sidenav__item--current":"tedi-sidenav__item--current-95a00f8f","tedi-sidenav__item--medium":"tedi-sidenav__item--medium-995f73f7","tedi-sidenav__icon":"tedi-sidenav__icon-b7155dbb","tedi-sidenav__item--small":"tedi-sidenav__item--small-1952afb5","tedi-sidenav__back-button":"tedi-sidenav__back-button-c8e74f92","tedi-sidenav__subheading":"tedi-sidenav__subheading-8cec3c0c","tedi-sidenav__subheading--mobile":"tedi-sidenav__subheading--mobile-e24704b2","sidenav__item--current":"sidenav__item--current-f5468e85"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav":"tedi-sidenav-8ef80858","tedi-sidenav__collapse":"tedi-sidenav__collapse-2c595f9e","tedi-sidenav__item":"tedi-sidenav__item-919825a5","tedi-sidenav--has-dividers":"tedi-sidenav--has-dividers-ceb44380","tedi-sidenav__link":"tedi-sidenav__link-e66a922a","tedi-sidenav--collapsed":"tedi-sidenav--collapsed-b7b406f9","tedi-sidenav__title":"tedi-sidenav__title-3bec8b71","tedi-sidenav__bullet":"tedi-sidenav__bullet-c51cd2ba","tedi-sidenav__link--active":"tedi-sidenav__link--active-cf22fc56","tedi-sidenav__item--has-children":"tedi-sidenav__item--has-children-71df3699","tedi-sidenav__toggle-icon":"tedi-sidenav__toggle-icon-63662692","tedi-sidenav__overlay":"tedi-sidenav__overlay-5feeb550","tedi-sidenav--mobile":"tedi-sidenav--mobile-98e75893","tedi-sidenav__item--level-2":"tedi-sidenav__item--level-2-3ed1a7e8","tedi-sidenav__list":"tedi-sidenav__list-58d1ae41","tedi-sidenav__item--with-tree":"tedi-sidenav__item--with-tree-39198d0d","tedi-sidenav__sub-item":"tedi-sidenav__sub-item-c714d866","tedi-sidenav__link--has-children-link":"tedi-sidenav__link--has-children-link-1d49019f","tedi-sidenav__link-collapse-wrapper":"tedi-sidenav__link-collapse-wrapper-cd74f534","tedi-sidenav__item--mobile":"tedi-sidenav__item--mobile-6571c3cc","tedi-sidenav__item--current":"tedi-sidenav__item--current-95a00f8f","tedi-sidenav__item--medium":"tedi-sidenav__item--medium-995f73f7","tedi-sidenav__icon":"tedi-sidenav__icon-b7155dbb","tedi-sidenav__item--small":"tedi-sidenav__item--small-1952afb5","tedi-sidenav__back-button":"tedi-sidenav__back-button-c8e74f92","tedi-sidenav__subheading":"tedi-sidenav__subheading-8cec3c0c","tedi-sidenav__subheading--mobile":"tedi-sidenav__subheading--mobile-e24704b2","sidenav__item--current":"sidenav__item--current-f5468e85"};exports.default=e;

package/src/tedi/components/layout/sidenav/sidenav.module.scss.es.js

@@ -11,6 +11,7 @@ const e = {
   "tedi-sidenav__item--has-children": "tedi-sidenav__item--has-children-71df3699",
   "tedi-sidenav__toggle-icon": "tedi-sidenav__toggle-icon-63662692",
   "tedi-sidenav__overlay": "tedi-sidenav__overlay-5feeb550",
+  "tedi-sidenav--mobile": "tedi-sidenav--mobile-98e75893",
   "tedi-sidenav__item--level-2": "tedi-sidenav__item--level-2-3ed1a7e8",
   "tedi-sidenav__list": "tedi-sidenav__list-58d1ae41",
   "tedi-sidenav__item--with-tree": "tedi-sidenav__item--with-tree-39198d0d",

package/src/tedi/components/navigation/tabs/tabs-helpers.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight"&&e.key!=="Home"&&e.key!=="End")return null;const l=e.currentTarget.closest('[role="tablist"]');if(!l)return null;const t=Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(a=>getComputedStyle(a).display!=="none"),n=t.indexOf(e.currentTarget);if(t.length===0||n===-1)return null;let r=-1;switch(e.key){case"ArrowLeft":r=n===0?t.length-1:n-1;break;case"ArrowRight":r=n===t.length-1?0:n+1;break;case"Home":r=0;break;case"End":r=t.length-1;break}return r!==-1?(e.preventDefault(),t[r].focus(),t[r].scrollIntoView({block:"nearest",inline:"nearest"}),t[r]):null};exports.navigateTablist=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{e.scrollIntoView({block:"nearest",inline:"nearest"})},s=e=>{if(e.key!=="ArrowLeft"&&e.key!=="ArrowRight"&&e.key!=="Home"&&e.key!=="End")return null;const l=e.currentTarget.closest('[role="tablist"]');if(!l)return null;const t=Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(a=>getComputedStyle(a).display!=="none"),n=t.indexOf(e.currentTarget);if(t.length===0||n===-1)return null;let r=-1;switch(e.key){case"ArrowLeft":r=n===0?t.length-1:n-1;break;case"ArrowRight":r=n===t.length-1?0:n+1;break;case"Home":r=0;break;case"End":r=t.length-1;break}return r!==-1?(e.preventDefault(),t[r].focus(),o(t[r]),t[r]):null};exports.navigateTablist=s;exports.scrollTabIntoView=o;

package/src/tedi/components/navigation/tabs/tabs-helpers.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Scrolls a tab fully into view inside a horizontally scrollable tablist.
+ * A no-op when the tab is already fully visible.
+ */
+export declare const scrollTabIntoView: (tab: HTMLElement) => void;
 /**
  * Navigates to a sibling tab in the tablist using ArrowLeft/ArrowRight/Home/End keys.
  * Returns the target tab element if navigation occurred, or null otherwise.

package/src/tedi/components/navigation/tabs/tabs-helpers.es.js

@@ -1,10 +1,12 @@
-const o = (e) => {
+const a = (e) => {
+  e.scrollIntoView({ block: "nearest", inline: "nearest" });
+}, s = (e) => {
   if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End")
     return null;
   const l = e.currentTarget.closest('[role="tablist"]');
   if (!l) return null;
   const t = Array.from(l.querySelectorAll('[role="tab"]:not([disabled])')).filter(
-    (a) => getComputedStyle(a).display !== "none"
+    (o) => getComputedStyle(o).display !== "none"
   ), n = t.indexOf(e.currentTarget);
   if (t.length === 0 || n === -1) return null;
   let r = -1;
@@ -22,8 +24,9 @@ const o = (e) => {
       r = t.length - 1;
       break;
   }
-  return r !== -1 ? (e.preventDefault(), t[r].focus(), t[r].scrollIntoView({ block: "nearest", inline: "nearest" }), t[r]) : null;
+  return r !== -1 ? (e.preventDefault(), t[r].focus(), a(t[r]), t[r]) : null;
 };
 export {
-  o as navigateTablist
+  s as navigateTablist,
+  a as scrollTabIntoView
 };

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../../base/icon/icon.cjs.js"),r=require("../tabs.module.scss.cjs.js"),_=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),c=l=>{const{id:e,children:d,icon:a,disabled:t=!1,className:b}=l,{currentTab:u,setCurrentTab:i}=_.useTabsContext(),s=u===e,g=()=>{t||i(e)},T=f=>{const n=q.navigateTablist(f);n&&i(n.id)};return o.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:m.default(r.default["tedi-tabs__trigger"],{[r.default["tedi-tabs__trigger--selected"]]:s},{[r.default["tedi-tabs__trigger--disabled"]]:t},b),onClick:g,onKeyDown:T,children:[a&&o.jsx(x.Icon,{name:a,size:18,color:"inherit"}),d]})};c.displayName="TabsTrigger";exports.TabsTrigger=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),x=require("../../../../../../external/classnames/index.cjs.js"),_=require("../../../base/icon/icon.cjs.js"),a=require("../tabs.module.scss.cjs.js"),q=require("../tabs-context.cjs.js"),l=require("../tabs-helpers.cjs.js"),d=b=>{const{id:e,children:u,icon:n,disabled:t=!1,className:g}=b,{currentTab:T,setCurrentTab:i}=q.useTabsContext(),r=T===e,f=s=>{t||(i(e),l.scrollTabIntoView(s.currentTarget))},m=s=>{const o=l.navigateTablist(s);o&&i(o.id)};return c.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":r,"aria-controls":`${e}-panel`,tabIndex:r?0:-1,disabled:t,className:x.default(a.default["tedi-tabs__trigger"],{[a.default["tedi-tabs__trigger--selected"]]:r},{[a.default["tedi-tabs__trigger--disabled"]]:t},g),onClick:f,onKeyDown:m,children:[n&&c.jsx(_.Icon,{name:n,size:18,color:"inherit"}),u]})};d.displayName="TabsTrigger";exports.TabsTrigger=d;

package/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.es.js

@@ -1,15 +1,15 @@
-import { jsxs as p, jsx as f } from "react/jsx-runtime";
-import T from "../../../../../../external/classnames/index.es.js";
+import { jsxs as p, jsx as T } from "react/jsx-runtime";
+import f from "../../../../../../external/classnames/index.es.js";
 import { Icon as u } from "../../../base/icon/icon.es.js";
 import s from "../tabs.module.scss.es.js";
 import { useTabsContext as _ } from "../tabs-context.es.js";
-import { navigateTablist as h } from "../tabs-helpers.es.js";
-const x = (n) => {
-  const { id: e, children: c, icon: a, disabled: t = !1, className: l } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
-    t || i(e);
-  }, b = (g) => {
-    const o = h(g);
-    o && i(o.id);
+import { navigateTablist as h, scrollTabIntoView as x } from "../tabs-helpers.es.js";
+const y = (c) => {
+  const { id: e, children: l, icon: i, disabled: t = !1, className: d } = c, { currentTab: m, setCurrentTab: o } = _(), r = m === e, b = (a) => {
+    t || (o(e), x(a.currentTarget));
+  }, g = (a) => {
+    const n = h(a);
+    n && o(n.id);
   };
   return /* @__PURE__ */ p(
     "button",
@@ -22,22 +22,22 @@ const x = (n) => {
       "aria-controls": `${e}-panel`,
       tabIndex: r ? 0 : -1,
       disabled: t,
-      className: T(
+      className: f(
         s["tedi-tabs__trigger"],
         { [s["tedi-tabs__trigger--selected"]]: r },
         { [s["tedi-tabs__trigger--disabled"]]: t },
-        l
+        d
       ),
-      onClick: m,
-      onKeyDown: b,
+      onClick: b,
+      onKeyDown: g,
       children: [
-        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
-        c
+        i && /* @__PURE__ */ T(u, { name: i, size: 18, color: "inherit" }),
+        l
       ]
     }
   );
 };
-x.displayName = "TabsTrigger";
+y.displayName = "TabsTrigger";
 export {
-  x as TabsTrigger
+  y as TabsTrigger
 };

package/src/tedi/components/overlays/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=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"),ee=4,a=x=>{var O;const{getCurrentBreakpointProps:F}=X.useBreakpointProps(x.defaultServerBreakpoint),{children:P,modal:q=!1,divided:R=!1,width:b="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=F(x),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[h.offset(ee),h.flip(),h.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:R,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[P,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(b,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),x=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ee=4,a=h=>{var O;const{getCurrentBreakpointProps:b}=X.useBreakpointProps(h.defaultServerBreakpoint),{children:F,modal:q=!1,divided:P=!1,width:R="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=b(h),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[x.offset(ee),x.flip(),x.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:P,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[F,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(R,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],role:"group",tabIndex:0,style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;

package/src/tedi/components/overlays/dropdown/dropdown.es.js

@@ -32,7 +32,7 @@ const me = 4, c = (h) => {
   e.useEffect(() => {
     t || f(o ?? null);
   }, [t, o]);
-  const D = e.useCallback(
+  const I = e.useCallback(
     (i) => {
       p === void 0 && W(i), s == null || s(i);
     },
@@ -41,10 +41,10 @@ const me = 4, c = (h) => {
     nodeId: k,
     open: t,
     placement: u,
-    onOpenChange: D,
+    onOpenChange: I,
     middleware: [le(me), de(), ce()],
     whileElementsMounted: ae
-  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, I = z([
+  }), { context: n, refs: r, x: H, y: L, strategy: M } = E, D = z([
     G(n),
     J(n, { role: "menu" }),
     K(n),
@@ -58,7 +58,7 @@ const me = 4, c = (h) => {
     })
   ]), T = {
     open: t,
-    setOpen: D,
+    setOpen: I,
     refs: r,
     listItemsRef: x,
     activeIndex: l,
@@ -68,7 +68,7 @@ const me = 4, c = (h) => {
     setContent: B,
     divided: R,
     variant: m,
-    ...I
+    ...D
   }, $ = (O = r.reference.current) == null ? void 0 : O.getBoundingClientRect().width, j = e.useMemo(() => {
     const i = r.reference.current;
     if (!i) return;
@@ -87,7 +87,7 @@ const me = 4, c = (h) => {
         children: /* @__PURE__ */ d(
           "div",
           {
-            ...I.getFloatingProps({
+            ...D.getFloatingProps({
               ref: r.setFloating,
               className: Y(
                 v["tedi-dropdown"],
@@ -110,6 +110,8 @@ const me = 4, c = (h) => {
               "div",
               {
                 className: v["tedi-dropdown__scroll"],
+                role: "group",
+                tabIndex: 0,
                 style: { maxHeight: typeof a == "number" ? `${a}px` : a },
                 children: g
               }

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
+};

package/src/tedi/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/content/heading-with-icon/heading-with-icon';
 export * from './components/content/truncate/truncate';
 export * from './components/content/table';
 export * from './components/content/text-group';
+export * from './components/content/table-card';
 export * from './components/content/calendar/calendar';
 export * from './components/loaders/spinner/spinner';
 export * from './components/loaders/skeleton';
@@ -47,7 +48,7 @@ export * from './components/form/textarea/textarea';
 export * from './components/form/number-field/number-field';
 export * from './components/form/toggle/toggle';
 export * from './components/form/feedback-text/feedback-text';
-export * from './components/form/search/search';
+export * from './components/form/search';
 export * from './components/form/radio/radio';
 export * from './components/form/choice-group';
 export * from './components/form/file-upload/file-upload';