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

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

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

package/src/tedi/components/layout/top-nav/components/top-nav-group/top-nav-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),d=require("../../../../base/icon/icon.cjs.js"),s=require("../../top-nav.module.scss.cjs.js"),o=({title:a,children:r,icon:e,headingLevel:u="h3",className:i})=>{const l=u;return t.jsxs("section",{className:n.default(s.default["tedi-top-nav__group"],i),children:[a&&t.jsxs(l,{className:s.default["tedi-top-nav__group-title"],children:[e&&t.jsx(d.Icon,{className:s.default["tedi-top-nav__group-icon"],...typeof e=="string"?{name:e}:e,size:typeof e=="string"?16:e.size??16,color:"inherit"}),a]}),t.jsx("ul",{className:s.default["tedi-top-nav__group-list"],children:r})]})};o.displayName="TopNav.Group";exports.TopNavGroup=o;exports.default=o;

package/src/tedi/components/layout/top-nav/components/top-nav-group/top-nav-group.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../../../base/icon/icon';
+export interface TopNavGroupProps {
+    /**
+     * Uppercase section title rendered above the link list. When omitted, the
+     * heading is not rendered — useful for a single-column mega-menu that only
+     * lists links.
+     */
+    title?: React.ReactNode;
+    /**
+     * `TopNav.SubItem` children. Anything else is ignored.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional leading icon rendered next to the title — material-symbol name or
+     * full `IconWithoutBackgroundProps`. Ignored when `title` is omitted.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * HTML heading level used for the title — pick the value that keeps the
+     * document outline correct on the host page.
+     * @default h3
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Additional class name applied to the column.
+     */
+    className?: string;
+}
+export declare const TopNavGroup: {
+    ({ title, children, icon, headingLevel, className, }: TopNavGroupProps): JSX.Element;
+    displayName: string;
+};
+export default TopNavGroup;

package/src/tedi/components/layout/top-nav/components/top-nav-group/top-nav-group.es.js

@@ -0,0 +1,33 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import l from "../../../../../../../external/classnames/index.es.js";
+import { Icon as n } from "../../../../base/icon/icon.es.js";
+import o from "../../top-nav.module.scss.es.js";
+const d = ({
+  title: t,
+  children: r,
+  icon: s,
+  headingLevel: p = "h3",
+  className: i
+}) => {
+  const m = p;
+  return /* @__PURE__ */ e("section", { className: l(o["tedi-top-nav__group"], i), children: [
+    t && /* @__PURE__ */ e(m, { className: o["tedi-top-nav__group-title"], children: [
+      s && /* @__PURE__ */ a(
+        n,
+        {
+          className: o["tedi-top-nav__group-icon"],
+          ...typeof s == "string" ? { name: s } : s,
+          size: typeof s == "string" ? 16 : s.size ?? 16,
+          color: "inherit"
+        }
+      ),
+      t
+    ] }),
+    /* @__PURE__ */ a("ul", { className: o["tedi-top-nav__group-list"], children: r })
+  ] });
+};
+d.displayName = "TopNav.Group";
+export {
+  d as TopNavGroup,
+  d as default
+};

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("../../../../../../../external/classnames/index.cjs.js"),C=require("react"),f=require("../../../../base/icon/icon.cjs.js"),e=require("../../top-nav.module.scss.cjs.js"),v=C.forwardRef((b,h)=>{const{children:N,href:d,icon:n,isActive:o=!1,hasSubmenu:u=!1,disabled:s=!1,onClick:l,as:x,className:I,submenu:j,renderSubmenuInline:g=!1,isSubmenuOpen:y,panelId:r,...S}=b,c=!d&&u,T=x??(c?"button":"a"),i=y??o,p=g&&i&&u,k=m=>{if(s){m.preventDefault();return}l==null||l(m)},q=a.default(e.default["tedi-top-nav__link"],{[e.default["tedi-top-nav__link--active"]]:o||i},I),w={...S,ref:h,className:q,onClick:k,...c?{type:"button",disabled:s,"aria-haspopup":!0,"aria-expanded":i,"aria-controls":r}:{href:s?void 0:d,"aria-current":o?"page":void 0,"aria-disabled":s||void 0}};return t.jsxs("li",{className:a.default(e.default["tedi-top-nav__item"],{[e.default["tedi-top-nav__item--has-inline-submenu"]]:p}),children:[t.jsxs(T,{...w,children:[n&&t.jsx(f.Icon,{className:e.default["tedi-top-nav__icon"],...typeof n=="string"?{name:n}:n,size:typeof n=="string"?18:n.size??18,color:"inherit"}),N,u&&t.jsx(f.Icon,{className:a.default(e.default["tedi-top-nav__icon"],e.default["tedi-top-nav__chevron"],{[e.default["tedi-top-nav__chevron--open"]]:i}),name:"keyboard_arrow_down",size:18,color:"inherit"})]}),p&&t.jsx("div",{id:r,className:a.default(e.default["tedi-top-nav__submenu"],e.default["tedi-top-nav__submenu--inline"]),"data-name":"top-nav-submenu",children:t.jsx("div",{className:a.default(e.default["tedi-top-nav__submenu-inner"],e.default["tedi-top-nav__submenu-inner--inline"]),children:j})})]})});v.displayName="TopNav.Item";const _=v;exports.TopNavItem=_;exports.default=_;

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../../../helpers/polymorphic/types';
+import { IconWithoutBackgroundProps } from '../../../../base/icon/icon';
+type TopNavItemLinkProps = {
+    /**
+     * Submenu content — typically a fragment of `TopNav.Group` elements.
+     * When provided and `isActive` is `true`, the parent `TopNav` renders
+     * the submenu inside the mega-menu panel below the bar, and a
+     * `keyboard_arrow_down` chevron is added next to the label.
+     *
+     * A mega-menu item is a toggle, not a link, so `href` is **not** allowed
+     * alongside `submenu` — the two are mutually exclusive.
+     */
+    submenu: React.ReactNode;
+    href?: never;
+} | {
+    /**
+     * Destination URL. Omit when the item only opens a submenu.
+     */
+    href?: string;
+    submenu?: never;
+};
+type TopNavItemOwnProps = {
+    /**
+     * Bar label. Pass a string or any ReactNode that renders inline.
+     */
+    children: React.ReactNode;
+    /**
+     * Optional leading icon — material-symbol name or full `IconWithoutBackgroundProps`.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * Marks this item as the current page. Renders `aria-current="page"`,
+     * applies the active visual, and (when the item has a submenu) surfaces
+     * the mega-menu panel below the bar.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Disables interaction. For a link, sets `aria-disabled` and removes the
+     * `href`. For a toggle-only parent (`<button>`), sets the native `disabled`
+     * attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click handler. Receives the original mouse / keyboard event.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Additional class name applied to the trigger element.
+     */
+    className?: string;
+    /** @internal Set by the parent to indicate the item carries submenu content. */
+    hasSubmenu?: boolean;
+    /** @internal When true and the submenu is open, render the submenu inside this `<li>` instead of as a full-width panel. */
+    renderSubmenuInline?: boolean;
+    /** @internal Parent-controlled submenu visibility. Defaults to `isActive` when undefined (standalone use / link items). */
+    isSubmenuOpen?: boolean;
+    /** @internal Shared id used to link the toggle button (`aria-controls`) to the submenu panel (`id`). */
+    panelId?: string;
+};
+type TopNavItemBaseProps = TopNavItemOwnProps & TopNavItemLinkProps;
+export type TopNavItemProps<C extends React.ElementType = 'a'> = PolymorphicComponentPropWithRef<C, TopNavItemBaseProps>;
+export declare const TopNavItem: <C extends React.ElementType = "a">(props: TopNavItemProps<C>) => React.ReactElement | null;
+export default TopNavItem;

package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.es.js

@@ -0,0 +1,101 @@
+import { jsxs as _, jsx as i } from "react/jsx-runtime";
+import t from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as P } from "react";
+import { Icon as v } from "../../../../base/icon/icon.es.js";
+import e from "../../top-nav.module.scss.es.js";
+const f = P(
+  (b, h) => {
+    const {
+      children: N,
+      href: p,
+      icon: n,
+      isActive: s = !1,
+      hasSubmenu: r = !1,
+      disabled: a = !1,
+      onClick: m,
+      as: I,
+      className: y,
+      submenu: g,
+      renderSubmenuInline: k = !1,
+      isSubmenuOpen: w,
+      panelId: l,
+      ...x
+    } = b, c = !p && r, C = I ?? (c ? "button" : "a"), o = w ?? s, d = k && o && r, S = (u) => {
+      if (a) {
+        u.preventDefault();
+        return;
+      }
+      m == null || m(u);
+    }, T = t(
+      e["tedi-top-nav__link"],
+      {
+        [e["tedi-top-nav__link--active"]]: s || o
+      },
+      y
+    ), z = {
+      ...x,
+      ref: h,
+      className: T,
+      onClick: S,
+      ...c ? {
+        type: "button",
+        disabled: a,
+        "aria-haspopup": !0,
+        "aria-expanded": o,
+        "aria-controls": l
+      } : {
+        href: a ? void 0 : p,
+        "aria-current": s ? "page" : void 0,
+        "aria-disabled": a || void 0
+      }
+    };
+    return /* @__PURE__ */ _(
+      "li",
+      {
+        className: t(e["tedi-top-nav__item"], {
+          [e["tedi-top-nav__item--has-inline-submenu"]]: d
+        }),
+        children: [
+          /* @__PURE__ */ _(C, { ...z, children: [
+            n && /* @__PURE__ */ i(
+              v,
+              {
+                className: e["tedi-top-nav__icon"],
+                ...typeof n == "string" ? { name: n } : n,
+                size: typeof n == "string" ? 18 : n.size ?? 18,
+                color: "inherit"
+              }
+            ),
+            N,
+            r && /* @__PURE__ */ i(
+              v,
+              {
+                className: t(e["tedi-top-nav__icon"], e["tedi-top-nav__chevron"], {
+                  [e["tedi-top-nav__chevron--open"]]: o
+                }),
+                name: "keyboard_arrow_down",
+                size: 18,
+                color: "inherit"
+              }
+            )
+          ] }),
+          d && /* @__PURE__ */ i(
+            "div",
+            {
+              id: l,
+              className: t(e["tedi-top-nav__submenu"], e["tedi-top-nav__submenu--inline"]),
+              "data-name": "top-nav-submenu",
+              children: /* @__PURE__ */ i("div", { className: t(e["tedi-top-nav__submenu-inner"], e["tedi-top-nav__submenu-inner--inline"]), children: g })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+f.displayName = "TopNav.Item";
+const B = f;
+export {
+  B as TopNavItem,
+  B as default
+};

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),o=require("../../../../../../../external/classnames/index.cjs.js"),t=require("../../top-nav.module.scss.cjs.js"),e=({className:r})=>a.jsx("li",{role:"separator","aria-orientation":"vertical",className:o.default(t.default["tedi-top-nav__separator"],r),children:a.jsx("span",{className:t.default["tedi-top-nav__separator-line"],"aria-hidden":"true"})});e.displayName="TopNav.Separator";exports.TopNavSeparator=e;exports.default=e;

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.d.ts

@@ -0,0 +1,11 @@
+export interface TopNavSeparatorProps {
+    /**
+     * Additional class name applied to the separator list item.
+     */
+    className?: string;
+}
+export declare const TopNavSeparator: {
+    ({ className }: TopNavSeparatorProps): JSX.Element;
+    displayName: string;
+};
+export default TopNavSeparator;

package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.es.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import o from "../../../../../../../external/classnames/index.es.js";
+import r from "../../top-nav.module.scss.es.js";
+const t = ({ className: e }) => /* @__PURE__ */ a("li", { role: "separator", "aria-orientation": "vertical", className: o(r["tedi-top-nav__separator"], e), children: /* @__PURE__ */ a("span", { className: r["tedi-top-nav__separator-line"], "aria-hidden": "true" }) });
+t.displayName = "TopNav.Separator";
+export {
+  t as TopNavSeparator,
+  t as default
+};

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),_=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),o=require("../../top-nav.module.scss.cjs.js"),x=require("../../top-nav-context.cjs.js"),n=S.forwardRef((i,r)=>{const{children:c,href:l,isActive:s=!1,onClick:e,as:d,className:m,...p}=i,v=d||"a",t=x.useTopNavContext(),b=N=>{e==null||e(N),t==null||t.closeSubmenu()},f={...p,ref:r,className:_.default(o.default["tedi-top-nav__subitem-link"],{[o.default["tedi-top-nav__subitem-link--active"]]:s},m),href:l,"aria-current":s?"page":void 0,onClick:b};return a.jsx("li",{className:o.default["tedi-top-nav__subitem"],children:a.jsx(v,{...f,children:c})})});n.displayName="TopNav.SubItem";const u=n;exports.TopNavSubItem=u;exports.default=u;

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../../../helpers/polymorphic/types';
+type TopNavSubItemBaseProps = {
+    /**
+     * Link label.
+     */
+    children: React.ReactNode;
+    /**
+     * Destination URL.
+     */
+    href?: string;
+    /**
+     * Marks this submenu item as the current page.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Click handler. Receives the original mouse / keyboard event.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Additional class name applied to the link element.
+     */
+    className?: string;
+};
+export type TopNavSubItemProps<C extends React.ElementType = 'a'> = PolymorphicComponentPropWithRef<C, TopNavSubItemBaseProps>;
+export declare const TopNavSubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
+export default TopNavSubItem;

package/src/tedi/components/layout/top-nav/components/top-nav-subitem/top-nav-subitem.es.js

@@ -0,0 +1,30 @@
+import { jsx as a } from "react/jsx-runtime";
+import b from "../../../../../../../external/classnames/index.es.js";
+import { forwardRef as _ } from "react";
+import o from "../../top-nav.module.scss.es.js";
+import { useTopNavContext as h } from "../../top-nav-context.es.js";
+const m = _(
+  (n, i) => {
+    const { children: r, href: c, isActive: s = !1, onClick: e, as: p, className: l, ...u } = n, d = p || "a", t = h(), f = (N) => {
+      e == null || e(N), t == null || t.closeSubmenu();
+    }, v = {
+      ...u,
+      ref: i,
+      className: b(
+        o["tedi-top-nav__subitem-link"],
+        { [o["tedi-top-nav__subitem-link--active"]]: s },
+        l
+      ),
+      href: c,
+      "aria-current": s ? "page" : void 0,
+      onClick: f
+    };
+    return /* @__PURE__ */ a("li", { className: o["tedi-top-nav__subitem"], children: /* @__PURE__ */ a(d, { ...v, children: r }) });
+  }
+);
+m.displayName = "TopNav.SubItem";
+const I = m;
+export {
+  I as TopNavSubItem,
+  I as default
+};

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

@@ -0,0 +1,5 @@
+export * from './components/top-nav-group/top-nav-group';
+export * from './components/top-nav-item/top-nav-item';
+export * from './components/top-nav-separator/top-nav-separator';
+export * from './components/top-nav-subitem/top-nav-subitem';
+export * from './top-nav';

package/src/tedi/components/layout/top-nav/top-nav-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null),o=()=>t.useContext(e);exports.TopNavContext=e;exports.useTopNavContext=o;

package/src/tedi/components/layout/top-nav/top-nav-context.d.ts

@@ -0,0 +1,11 @@
+export interface TopNavContextValue {
+    /**
+     * Closes the open desktop submenu (mega-menu) panel. Called by `TopNav.SubItem`
+     * when a submenu link is activated so the panel dismisses on navigation
+     * (important for SPA / client-side routing where the nav stays mounted).
+     * No-op when there is no open panel.
+     */
+    closeSubmenu: () => void;
+}
+export declare const TopNavContext: import('react').Context<TopNavContextValue | null>;
+export declare const useTopNavContext: () => TopNavContextValue | null;

package/src/tedi/components/layout/top-nav/top-nav-context.es.js

@@ -0,0 +1,6 @@
+import { useContext as t, createContext as o } from "react";
+const e = o(null), x = () => t(e);
+export {
+  e as TopNavContext,
+  x as useTopNavContext
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ie=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,c=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&c.push(ie(i))}),c.length>0&&r.push({subHeading:f.title,subItems:c})}),r.length>0?r:void 0},p=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:c,onMenuToggle:i,showMobileOverlay:V=!0,className:O,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.useBreakpoint(),T=C.isBreakpointBelow(K,f),b=c!==void 0,[$,_]=t.useState(!1),z=b?c:$;t.useEffect(()=>{!b&&!T&&_(!1)},[T,b]);const J=e=>{b||_(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),l=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=l.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[l]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const q=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:q}),[q]),I=t.useRef(null),h=t.useId();t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,B=t.useMemo(()=>l.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[l,N]),U=t.useMemo(()=>l.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[l]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:O});const j=F==="content",x=re(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],O),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:j,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!j&&B&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:B.props.submenu})})]})})};p.displayName="TopNav";p.Item=g.TopNavItem;p.Group=W.TopNavGroup;p.SubItem=R.TopNavSubItem;p.Separator=G.TopNavSeparator;exports.TopNav=p;exports.default=p;

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

@@ -0,0 +1,91 @@
+import { default as React, ReactNode } from 'react';
+import { Breakpoint } from '../../../helpers';
+import { TopNavGroupProps } from './components/top-nav-group/top-nav-group';
+import { TopNavItemProps } from './components/top-nav-item/top-nav-item';
+import { TopNavSubItemProps } from './components/top-nav-subitem/top-nav-subitem';
+type BreakpointWidthName = Exclude<Breakpoint, 'xs'>;
+export type TopNavMaxWidth = number | BreakpointWidthName | (string & {});
+export interface TopNavProps {
+    /**
+     * `TopNav.Item` and `TopNav.Separator` children. Any other
+     * React node is ignored. Fragments are flattened, so `<>…</>` wrappers work
+     * transparently.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the wrapping `<nav>` landmark.
+     */
+    ariaLabel: string;
+    /**
+     * Breakpoint below which the bar collapses into the shared Sidenav mobile
+     * drawer. Pass any TEDI breakpoint name (`xs`/`sm`/`md`/`lg`/`xl`/`xxl`).
+     * @default md
+     */
+    mobileBreakpoint?: Breakpoint;
+    /**
+     * Controlled open state for the mobile drawer. Pair with `onMenuToggle`
+     * to wire it to an external toggle button.
+     */
+    isMobileOpen?: boolean;
+    /**
+     * Fires whenever the mobile drawer opens or closes.
+     */
+    onMenuToggle?: (open: boolean) => void;
+    /**
+     * Dim the rest of the viewport when the mobile drawer is open.
+     * @default true
+     */
+    showMobileOverlay?: boolean;
+    /**
+     * Additional class name applied to the desktop `<nav>`.
+     */
+    className?: string;
+    /**
+     * Element id forwarded to the desktop `<nav>`.
+     */
+    id?: string;
+    /**
+     * Controls how the submenu (mega-menu) panel sizes and positions itself
+     * when the active item has submenu content. Both options use the same
+     * padding — this only affects the panel's width and horizontal position,
+     * not its density.
+     *
+     * - `'full'` (default) — the panel stretches to the full nav width and is
+     *   centered, suitable for wide multi-column mega-menus.
+     * - `'content'` — the panel is only as wide as its content and sits
+     *   left-aligned directly under the active item (it is *not* a smaller /
+     *   tighter variant — just not stretched). Good for single- or few-column
+     *   menus.
+     * @default full
+     */
+    submenuFit?: 'full' | 'content';
+    /**
+     * Constrains the inner content (item bar and full-width submenu inner) to a
+     * maximum width and centers it inside the blue `<nav>` background. Pass any
+     * valid CSS length (e.g. `1440`, `'1440px'`, `'90rem'`), or a TEDI breakpoint
+     * name (`'sm' | 'md' | 'lg' | 'xl' | 'xxl'`) — these resolve to the
+     * breakpoint's `min-width` (36rem / 48rem / 62rem / 75rem / 87.5rem
+     * respectively), useful for aligning the nav inner with a breakpoint-driven
+     * content container. The `<nav>` itself still spans 100% of its container.
+     *
+     * Pass `'none'` (or `0`) to disable the constraint and let the bar fill the
+     * full width of the nav.
+     * @default xxl
+     */
+    maxWidth?: TopNavMaxWidth | 'none';
+}
+export declare const TopNav: {
+    (props: TopNavProps): React.ReactElement | null;
+    displayName: string;
+    Item: <C extends React.ElementType = "a">(props: TopNavItemProps<C>) => React.ReactElement | null;
+    Group: {
+        ({ title, children, icon, headingLevel, className, }: TopNavGroupProps): JSX.Element;
+        displayName: string;
+    };
+    SubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
+    Separator: {
+        ({ className }: import('./components/top-nav-separator/top-nav-separator').TopNavSeparatorProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default TopNav;