@tedi-design-system/react 14.0.0-rc.1

package/src/community/components/layout/header/components/header-role/header-role.es.js

@@ -0,0 +1,71 @@
+import { jsx as e, jsxs as m, Fragment as b } from "react/jsx-runtime";
+import y from "react";
+import { ScrollFade as f } from "../../../../../../tedi/components/misc/scroll-fade/scroll-fade.es.js";
+import { Collapse as v } from "../../../../collapse/collapse.es.js";
+import { Tag as T } from "../../../../tag/tag.es.js";
+import { Text as h } from "../../../../typography/text/text.es.js";
+import { HeaderDropdown as x } from "../header-dropdown/header-dropdown.es.js";
+import i from "./header-role.module.scss.es.js";
+import { useLabels as u } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
+import { Card as C } from "../../../../card/card.es.js";
+import { CardContent as N } from "../../../../card/card-content/card-content.es.js";
+const R = (t) => {
+  const { renderModal: l = !1, ...r } = t, [d, o] = y.useState(!1);
+  return l ? /* @__PURE__ */ e(H, { ...r, open: d, onToggle: o }) : /* @__PURE__ */ e(w, { ...r, open: d, onToggle: o });
+};
+R.displayName = "HeaderRole";
+const w = (t) => {
+  const { getLabel: l } = u(), { children: r, open: d, onToggle: o, primaryInfo: s, secondaryInfo: n, label: a = l("header.role-label") } = t, p = () => a === l("header.role-label") ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(T, { color: "primary", type: "secondary", children: a }) }) : /* @__PURE__ */ m(h, { color: "muted", modifiers: ["bold", "small"], children: [
+    a,
+    !!n && /* @__PURE__ */ m(b, { children: [
+      " ",
+      /* @__PURE__ */ m(h, { element: "span", modifiers: ["small", "normal"], children: [
+        /* @__PURE__ */ e("span", { style: { color: "var(--color-border-default)" }, children: "|" }),
+        " ",
+        n
+      ] })
+    ] })
+  ] }), c = typeof r == "function" ? r({ onToggle: o }) : r, g = /* @__PURE__ */ e(
+    x,
+    {
+      shouldAnimate: !0,
+      open: d,
+      onToggle: o,
+      tooltipProps: { cardProps: { padding: 0 }, maxWidth: "medium" },
+      triggerProps: {
+        children: s,
+        "aria-label": `${a ?? ""} ${n ?? ""} ${s ?? ""}`,
+        visualType: "link",
+        iconRight: { name: "expand_more", color: "primary", size: 24 }
+      },
+      children: /* @__PURE__ */ e("div", { className: i["header-role-wrapper"], children: /* @__PURE__ */ e(f, { fadeSize: 0, children: /* @__PURE__ */ e("div", { className: i["header-role-children"], children: c }) }) })
+    }
+  );
+  return /* @__PURE__ */ m("div", { children: [
+    p(),
+    c ? g : s
+  ] });
+}, H = (t) => {
+  const { getLabel: l } = u(), { children: r, open: d, onToggle: o, primaryInfo: s, secondaryInfo: n, label: a = l("header.role-label") } = t, p = /* @__PURE__ */ m(h, { element: "span", color: "muted", modifiers: "bold", children: [
+    a,
+    " ",
+    s,
+    n && /* @__PURE__ */ e(h, { element: "span", modifiers: "normal", children: ` | ${n}` })
+  ] }), c = typeof r == "function" ? r({ onToggle: o }) : r;
+  return /* @__PURE__ */ e(C, { background: "bg-muted", borderRadius: !1, borderless: !0, children: /* @__PURE__ */ e(N, { padding: 0, children: c ? /* @__PURE__ */ e(
+    v,
+    {
+      id: "role-collapse",
+      open: d,
+      onToggle: o,
+      className: i["header-role-collapse"],
+      hideCollapseText: !0,
+      title: p,
+      children: /* @__PURE__ */ e("div", { className: i["header-role-wrapper"], children: /* @__PURE__ */ e(f, { fadeSize: 0, children: /* @__PURE__ */ e("div", { className: i["header-role-children"], children: c }) }) })
+    }
+  ) : /* @__PURE__ */ e("div", { className: i["header-role-children"], children: p }) }) });
+};
+export {
+  R as HeaderRole,
+  R as default
+};

package/src/community/components/layout/header/components/header-role/header-role.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"header-role-collapse":"header-role-collapse-7664165f","header-role-wrapper":"header-role-wrapper-c65bcd63","header-role-children":"header-role-children-3fdd2c2c"};exports.default=e;

package/src/community/components/layout/header/components/header-role/header-role.module.scss.es.js

@@ -0,0 +1,8 @@
+const e = {
+  "header-role-collapse": "header-role-collapse-7664165f",
+  "header-role-wrapper": "header-role-wrapper-c65bcd63",
+  "header-role-children": "header-role-children-3fdd2c2c"
+};
+export {
+  e as default
+};

package/src/community/components/layout/header/components/header-settings/header-settings.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("react"),i=require("../../../../../../tedi/components/misc/separator/separator.cjs.js"),h=require("../../../../../helpers/hooks/use-layout.cjs.js"),a=require("../../../../button/button.cjs.js"),C=require("../../../../typography/heading/heading.cjs.js"),L=require("../../../layout-context.cjs.js"),f=require("../header-dropdown/header-dropdown.cjs.js"),T=require("../header-modal/header-modal.cjs.js"),v=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),k=require("../../../../card/card.cjs.js"),H=require("../../../../card/card-content/card-content.cjs.js"),M=require("../../../../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),c=y=>{const{children:o,onActionClick:n,closeOnAction:x=!0,iconName:j}=y,[l,r]=g.useState(!1),m=h.useLayout(["desktop"]),d=h.useLayout(["mobile"]),{getLabel:t}=v.useLabels(),{headerType:b}=g.useContext(L.LayoutContext),u={children:t("header.settings"),visualType:"tertiary",icon:{name:j||"account_circle",color:"primary",size:36}};if(b==="public")return e.jsx(a.Button,{icon:d?{name:"login",color:"primary",size:24}:void 0,visualType:d?"tertiary":"primary",onClick:n,children:t("header.login")});const s=typeof o=="function"?o({onToggle:r}):o;if(!s)return e.jsx(a.Button,{icon:{name:"logout",color:"primary",size:24},visualType:"tertiary",onClick:n,children:t("header.logout")});const p=()=>e.jsx(a.Button,{onClick:()=>{n(),x&&r(!1)},iconLeft:"logout",visualType:"link",children:t("header.logout")}),S=e.jsx(f.HeaderDropdown,{open:l,onToggle:r,tooltipProps:{cardProps:{padding:1}},triggerProps:u,children:e.jsxs(M.VerticalSpacing,{size:1,children:[s,e.jsx(i.Separator,{isStretched:!0}),e.jsx(p,{})]})}),q=e.jsxs(T.HeaderModal,{open:l,onToggle:r,ariaLabelledby:"header-settings-modal-label",triggerProps:u,children:[e.jsx(C.Heading,{id:"header-settings-modal-label",className:"sr-only",children:t("header.settings")}),s,e.jsx(i.Separator,{isStretched:!0}),e.jsx(k.Card,{borderless:!0,children:e.jsx(H.CardContent,{children:e.jsx(p,{})})}),e.jsx(i.Separator,{isStretched:!0})]});return m?S:q};c.displayName="HeaderSettings";exports.HeaderSettings=c;exports.default=c;

package/src/community/components/layout/header/components/header-settings/header-settings.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface HeaderSettingsProps {
+    /**
+     * Called on different actions depending on type of the Header.
+     * - On system header it is called on logout button click.
+     * - On public header it is called on login button click.
+     */
+    onActionClick: () => void;
+    /**
+     * Content of HeaderDropdown
+     * When using a function you have access to onToggle callback that can be used to close the menu
+     */
+    children?: ((props: {
+        onToggle: (open: boolean) => void;
+    }) => React.ReactNode) | React.ReactNode;
+    /**
+     * Allow to change icon name
+     */
+    iconName?: string;
+    /**
+     * Close menu on login/logout click
+     * @default true
+     */
+    closeOnAction?: boolean;
+}
+export declare const HeaderSettings: React.FC<HeaderSettingsProps>;
+export default HeaderSettings;

package/src/community/components/layout/header/components/header-settings/header-settings.es.js

@@ -0,0 +1,78 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import u from "react";
+import { Separator as a } from "../../../../../../tedi/components/misc/separator/separator.es.js";
+import { useLayout as g } from "../../../../../helpers/hooks/use-layout.es.js";
+import { Button as s } from "../../../../button/button.es.js";
+import { Heading as k } from "../../../../typography/heading/heading.es.js";
+import { LayoutContext as L } from "../../../layout-context.es.js";
+import { HeaderDropdown as v } from "../header-dropdown/header-dropdown.es.js";
+import { HeaderModal as x } from "../header-modal/header-modal.es.js";
+import { useLabels as H } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
+import { Card as z } from "../../../../card/card.es.js";
+import { CardContent as O } from "../../../../card/card-content/card-content.es.js";
+import { VerticalSpacing as A } from "../../../../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
+const N = (h) => {
+  const { children: t, onActionClick: i, closeOnAction: f = !0, iconName: y } = h, [l, r] = u.useState(!1), b = g(["desktop"]), c = g(["mobile"]), { getLabel: o } = H(), { headerType: C } = u.useContext(L), d = {
+    children: o("header.settings"),
+    visualType: "tertiary",
+    icon: { name: y || "account_circle", color: "primary", size: 36 }
+  };
+  if (C === "public")
+    return /* @__PURE__ */ e(
+      s,
+      {
+        icon: c ? { name: "login", color: "primary", size: 24 } : void 0,
+        visualType: c ? "tertiary" : "primary",
+        onClick: i,
+        children: o("header.login")
+      }
+    );
+  const n = typeof t == "function" ? t({ onToggle: r }) : t;
+  if (!n)
+    return /* @__PURE__ */ e(s, { icon: { name: "logout", color: "primary", size: 24 }, visualType: "tertiary", onClick: i, children: o("header.logout") });
+  const p = () => /* @__PURE__ */ e(
+    s,
+    {
+      onClick: () => {
+        i(), f && r(!1);
+      },
+      iconLeft: "logout",
+      visualType: "link",
+      children: o("header.logout")
+    }
+  ), S = /* @__PURE__ */ e(
+    v,
+    {
+      open: l,
+      onToggle: r,
+      tooltipProps: { cardProps: { padding: 1 } },
+      triggerProps: d,
+      children: /* @__PURE__ */ m(A, { size: 1, children: [
+        n,
+        /* @__PURE__ */ e(a, { isStretched: !0 }),
+        /* @__PURE__ */ e(p, {})
+      ] })
+    }
+  ), T = /* @__PURE__ */ m(
+    x,
+    {
+      open: l,
+      onToggle: r,
+      ariaLabelledby: "header-settings-modal-label",
+      triggerProps: d,
+      children: [
+        /* @__PURE__ */ e(k, { id: "header-settings-modal-label", className: "sr-only", children: o("header.settings") }),
+        n,
+        /* @__PURE__ */ e(a, { isStretched: !0 }),
+        /* @__PURE__ */ e(z, { borderless: !0, children: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(p, {}) }) }),
+        /* @__PURE__ */ e(a, { isStretched: !0 })
+      ]
+    }
+  );
+  return b ? S : T;
+};
+N.displayName = "HeaderSettings";
+export {
+  N as HeaderSettings,
+  N as default
+};

package/src/community/components/layout/header/components/logo/logo.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),u=require("../../../../anchor/anchor.cjs.js"),r=require("./logo.module.scss.cjs.js"),g=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),s=t=>{const{imageUrl:a="logo.svg",anchorProps:o}=t,{getLabel:l}=g.useLabels(),c=o?u.Anchor:n.Fragment;return e.jsx("div",{className:r.default.header__logo,children:e.jsx(c,{...o,children:e.jsx("img",{src:a,alt:l("header.logo"),className:r.default["header__logo-image"]})})})};exports.Logo=s;exports.default=s;

package/src/community/components/layout/header/components/logo/logo.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AnchorProps } from '../../../../anchor/anchor';
+export interface LogoProps<H extends React.ElementType = 'a'> {
+    /**
+     * Url to logo
+     * @default /logo.svg
+     */
+    imageUrl?: string;
+    /**
+     * Wrap logo with Anchor. Children are ignored.
+     */
+    anchorProps?: Partial<AnchorProps<H>>;
+}
+export declare const Logo: <H extends React.ElementType = "a">(props: LogoProps<H>) => import("react/jsx-runtime").JSX.Element;
+export default Logo;

package/src/community/components/layout/header/components/logo/logo.es.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import l from "react";
+import { Anchor as c } from "../../../../anchor/anchor.es.js";
+import e from "./logo.module.scss.es.js";
+import { useLabels as g } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
+const h = (a) => {
+  const { imageUrl: t = "logo.svg", anchorProps: r } = a, { getLabel: s } = g(), m = r ? c : l.Fragment;
+  return /* @__PURE__ */ o("div", { className: e.header__logo, children: /* @__PURE__ */ o(m, { ...r, children: /* @__PURE__ */ o("img", { src: t, alt: s("header.logo"), className: e["header__logo-image"] }) }) });
+};
+export {
+  h as Logo,
+  h as default
+};

package/src/community/components/layout/header/components/logo/logo.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="header__logo-09502920",o={header__logo:e,"header__logo-image":"header__logo-image-b130d36f"};exports.default=o;exports.header__logo=e;

package/src/community/components/layout/header/components/logo/logo.module.scss.es.js

@@ -0,0 +1,8 @@
+const e = "header__logo-09502920", o = {
+  header__logo: e,
+  "header__logo-image": "header__logo-image-b130d36f"
+};
+export {
+  o as default,
+  e as header__logo
+};

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),v=require("../../../../button/button.cjs.js"),b=require("../../../layout-context.cjs.js"),n=require("./sidenav-toggle.module.scss.cjs.js"),q=require("../../../../../../tedi/providers/label-provider/use-labels.cjs.js"),l=()=>{const{menuOpen:e,toggleMenu:s,reference:u,getReferenceProps:r,sideNavProps:t,onHeaderSidenavToggle:o}=m.useContext(b.LayoutContext),{getLabel:a}=q.useLabels(),i=a("header.toggle",e),c=f.default(n.default["sidenav-toggle"],{[n.default["sidenav-toggle--open"]]:e});if(!(t!=null&&t.navItems.length)&&!o)return null;const g=o?{onClick:s}:{...r(),ref:u};return d.jsx(v.Button,{...g,icon:{name:e?"close":"menu",className:n.default["sidenav-toggle__icon"]},visualType:"primary",className:c,children:i})};exports.SidenavToggle=l;exports.default=l;

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -0,0 +1,2 @@
+export declare const SidenavToggle: () => import("react/jsx-runtime").JSX.Element | null;
+export default SidenavToggle;

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.es.js

@@ -0,0 +1,30 @@
+import { jsx as c } from "react/jsx-runtime";
+import u from "../../../../../../../external/classnames/index.es.js";
+import f from "react";
+import { Button as p } from "../../../../button/button.es.js";
+import { LayoutContext as d } from "../../../layout-context.es.js";
+import t from "./sidenav-toggle.module.scss.es.js";
+import { useLabels as v } from "../../../../../../tedi/providers/label-provider/use-labels.es.js";
+const T = () => {
+  const { menuOpen: e, toggleMenu: r, reference: s, getReferenceProps: a, sideNavProps: o, onHeaderSidenavToggle: n } = f.useContext(d), { getLabel: l } = v(), m = l("header.toggle", e), g = u(t["sidenav-toggle"], { [t["sidenav-toggle--open"]]: e });
+  if (!(o != null && o.navItems.length) && !n)
+    return null;
+  const i = n ? { onClick: r } : { ...a(), ref: s };
+  return /* @__PURE__ */ c(
+    p,
+    {
+      ...i,
+      icon: {
+        name: e ? "close" : "menu",
+        className: t["sidenav-toggle__icon"]
+      },
+      visualType: "primary",
+      className: g,
+      children: m
+    }
+  );
+};
+export {
+  T as SidenavToggle,
+  T as default
+};

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"sidenav-toggle":"sidenav-toggle-f1826ee0","sidenav-toggle--open":"sidenav-toggle--open-9a78a72d","sidenav-toggle__icon":"sidenav-toggle__icon-da3fc244"};exports.default=e;

package/src/community/components/layout/header/components/sidenav-toggle/sidenav-toggle.module.scss.es.js

@@ -0,0 +1,8 @@
+const e = {
+  "sidenav-toggle": "sidenav-toggle-f1826ee0",
+  "sidenav-toggle--open": "sidenav-toggle--open-9a78a72d",
+  "sidenav-toggle__icon": "sidenav-toggle__icon-da3fc244"
+};
+export {
+  e as default
+};

package/src/community/components/layout/header/components/skip-links/skip-links.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../../../../anchor/anchor.cjs.js"),a=require("./skip-links.module.scss.cjs.js"),s=i=>{const{links:n,linkAs:l}=i;return e.jsx("div",{"data-name":"skip-links",className:a.default["skip-links"],children:e.jsx("ul",{children:n.map((r,t)=>e.jsx("li",{children:e.jsx(u.Anchor,{as:l,...r})},t))})})};exports.SkipLinks=s;exports.default=s;

package/src/community/components/layout/header/components/skip-links/skip-links.d.ts

@@ -0,0 +1,20 @@
+import { AllowedHTMLTags } from '../../../../../helpers/polymorphic/types';
+import { IntentionalAny } from '../../../../../types';
+import { AnchorProps } from '../../../../anchor/anchor';
+type ConditionalTypes<C extends React.ElementType = 'a'> = {
+    /**
+     * Render all links as this component<br />
+     * See [Anchor/CustomComponent](/?path=/docs/components-anchor--custom-component) for an example
+     */
+    linkAs: AllowedHTMLTags<C, 'a' | React.ComponentType<IntentionalAny>>;
+    /**
+     * Category links
+     */
+    links: AnchorProps<C>[];
+} | {
+    linkAs?: never;
+    links: AnchorProps<IntentionalAny>[];
+};
+export type SkipLinksProps<C extends React.ElementType = 'a'> = ConditionalTypes<C>;
+export declare const SkipLinks: <C extends React.ElementType = "a">(props: SkipLinksProps<C>) => JSX.Element;
+export default SkipLinks;

package/src/community/components/layout/header/components/skip-links/skip-links.es.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Anchor as t } from "../../../../anchor/anchor.es.js";
+import a from "./skip-links.module.scss.es.js";
+const p = (s) => {
+  const { links: n, linkAs: r } = s;
+  return /* @__PURE__ */ i("div", { "data-name": "skip-links", className: a["skip-links"], children: /* @__PURE__ */ i("ul", { children: n.map((l, o) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(t, { as: r, ...l }) }, o)) }) });
+};
+export {
+  p as SkipLinks,
+  p as default
+};

package/src/community/components/layout/header/components/skip-links/skip-links.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"skip-links":"skip-links-19145f50"};exports.default=e;

package/src/community/components/layout/header/components/skip-links/skip-links.module.scss.es.js

@@ -0,0 +1,6 @@
+const s = {
+  "skip-links": "skip-links-19145f50"
+};
+export {
+  s as default
+};

package/src/community/components/layout/header/header/header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),X=require("../../../../../../external/classnames/index.cjs.js"),s=require("react"),$=require("../../../../../tedi/components/misc/affix/affix.cjs.js"),F=require("../../../../../tedi/components/misc/print/print.cjs.js"),I=require("../../../anchor/anchor.cjs.js"),z=require("../../layout-context.cjs.js"),G=require("../../sidenav/utility.cjs.js"),x=require("../components/header-bottom-content/header-bottom-content.cjs.js"),J=require("../components/header-content/header-content.cjs.js"),y=require("../components/header-language/header-language.cjs.js"),q=require("../components/header-navigation/header-navigation.cjs.js"),K=require("../components/header-notification/header-notification.cjs.js"),Q=require("../components/header-role/header-role.cjs.js"),N=require("../components/header-settings/header-settings.cjs.js"),U=require("../components/logo/logo.cjs.js"),W=require("../components/sidenav-toggle/sidenav-toggle.cjs.js"),Y=require("../components/skip-links/skip-links.cjs.js"),o=require("./header.module.scss.cjs.js"),j=require("../../../../helpers/hooks/use-layout.cjs.js"),Z=require("../../../../../tedi/components/layout/grid/row.cjs.js"),ee=require("../../../../../tedi/components/layout/grid/col.cjs.js"),H=v=>{const{skipLinks:m,logo:S,children:h,bottomContent:d,notification:p,minimalSettingsArea:_=["mobile"],showCustomContent:b,showSystemCustomContent:k,enablePublicCustomContent:L=!1,...w}=v,A=b??k??["desktop","tablet"],B=j.useLayout(A),E=j.useLayout(_),{headerType:f,sideNavProps:R,headerElement:T}=s.useContext(z.LayoutContext),{shouldBreakToBottomContent:l,shouldBreakToHeader:g}=G.useSidenavRendered(f,R),c=[I.Anchor.displayName,Q.HeaderRole.displayName,y.HeaderLanguage.displayName,N.HeaderSettings.displayName],M=[y.HeaderLanguage.displayName,N.HeaderSettings.displayName],P=[J.HeaderContent.displayName],C=t=>t.type.displayName,O=t=>D(u(t,E?M:c)),u=(t,r=c)=>{const a=[];return s.Children.forEach(t,n=>{if(s.isValidElement(n)){const i=C(n);r.includes(i)?a.push(n):n.type===s.Fragment&&a.push(...u(n.props.children,r))}}),a},D=(t,r=c)=>{const a=[];return r.forEach(n=>{s.Children.forEach(t,i=>{s.isValidElement(i)&&C(i)===n&&a.push(i)})}),a},V=X.default(o.default.header,{[o.default["header--with-bottom-content"]]:l||!!d});return e.jsxs(F.Print,{visibility:"hide",children:[m&&e.jsx(Y.SkipLinks,{...m}),p&&e.jsx(K.HeaderNotification,{...p}),e.jsxs("header",{"data-name":"header",...w,ref:T,className:V,children:[e.jsx(W.SidenavToggle,{}),e.jsx(U.Logo,{...S}),e.jsxs("div",{className:o.default.header__content,children:[e.jsxs("div",{className:o.default["header__content-left"],children:[(f==="system"||L&&!g)&&B&&u(h,P),g&&e.jsx(q.HeaderNavigation,{})]}),e.jsx(Z.Row,{className:o.default["header__content-right"],wrap:"nowrap",alignItems:"center",gutterX:4,xl:{gutterX:5},children:O(h).map((t,r)=>e.jsx(ee.Col,{width:"auto",className:o.default["header__content-item"],children:t},r))})]})]}),d&&!l&&e.jsx($.Affix,{position:"sticky",top:0,relative:"window",className:o.default.header__affix,children:e.jsx(x.HeaderBottomContent,{...d})}),l&&e.jsx(x.HeaderBottomContent,{cardProps:{border:"top-border-default",padding:.75,borderRadius:!1},children:e.jsx(q.HeaderNavigation,{})})]})};exports.Header=H;exports.default=H;

package/src/community/components/layout/header/header/header.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Layouts } from '../../../../helpers';
+import { HeaderBottomContentProps } from '../components/header-bottom-content/header-bottom-content';
+import { HeaderNotificationProps } from '../components/header-notification/header-notification';
+import { LogoProps } from '../components/logo/logo';
+import { SkipLinksProps } from '../components/skip-links/skip-links';
+export interface HeaderProps<H extends React.ElementType> {
+    /**
+     * Custom content of header
+     */
+    children?: React.ReactNode[] | React.ReactNode;
+    /**
+     * Skiplinks properties. See more @skip-links
+     */
+    skipLinks: SkipLinksProps;
+    /**
+     * Logo properties see more @logo
+     */
+    logo: LogoProps<H>;
+    /**
+     * Props of HeaderBottomContent
+     */
+    bottomContent?: HeaderBottomContentProps;
+    /**
+     * In which breakpoints header should render minimal settings module.
+     * That means in those breakpoints only HeaderSettings and HeaderLanguage are rendered.
+     * RoleSelection and custom Anchors are not rendered. They should move to HeaderSettings dropdown/modal
+     * @default ['mobile']
+     */
+    minimalSettingsArea?: Layouts;
+    /**
+     * @deprecated Use showCustomContent instead
+     */
+    showSystemCustomContent?: Layouts;
+    /**
+     * In which breakpoints header should render custom content.
+     * That means in those breakpoints only HeaderContent children is rendered.
+     * @default ['desktop', 'tablet']
+     */
+    showCustomContent?: Layouts;
+    /**
+     * Whether the header should render public custom content.
+     * Only affects public header type.
+     * @default false
+     */
+    enablePublicCustomContent?: boolean;
+    /**
+     * Props of notification bar above the header.
+     */
+    notification?: HeaderNotificationProps;
+}
+export declare const Header: <H extends React.ElementType = "a">(props: HeaderProps<H>) => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/src/community/components/layout/header/header/header.es.js

@@ -0,0 +1,99 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import X from "../../../../../../external/classnames/index.es.js";
+import a from "react";
+import { Affix as F } from "../../../../../tedi/components/misc/affix/affix.es.js";
+import { Print as I } from "../../../../../tedi/components/misc/print/print.es.js";
+import { Anchor as q } from "../../../anchor/anchor.es.js";
+import { LayoutContext as z } from "../../layout-context.es.js";
+import { useSidenavRendered as G } from "../../sidenav/utility.es.js";
+import { HeaderBottomContent as y } from "../components/header-bottom-content/header-bottom-content.es.js";
+import { HeaderContent as J } from "../components/header-content/header-content.es.js";
+import { HeaderLanguage as _ } from "../components/header-language/header-language.es.js";
+import { HeaderNavigation as H } from "../components/header-navigation/header-navigation.es.js";
+import { HeaderNotification as K } from "../components/header-notification/header-notification.es.js";
+import { HeaderRole as Q } from "../components/header-role/header-role.es.js";
+import { HeaderSettings as b } from "../components/header-settings/header-settings.es.js";
+import { Logo as U } from "../components/logo/logo.es.js";
+import { SidenavToggle as W } from "../components/sidenav-toggle/sidenav-toggle.es.js";
+import { SkipLinks as Y } from "../components/skip-links/skip-links.es.js";
+import n from "./header.module.scss.es.js";
+import { useLayout as v } from "../../../../helpers/hooks/use-layout.es.js";
+import { Row as Z } from "../../../../../tedi/components/layout/grid/row.es.js";
+import { Col as $ } from "../../../../../tedi/components/layout/grid/col.es.js";
+const ve = (S) => {
+  const {
+    skipLinks: f,
+    logo: w,
+    children: h,
+    bottomContent: d,
+    notification: C,
+    minimalSettingsArea: k = ["mobile"],
+    showCustomContent: x,
+    showSystemCustomContent: A,
+    enablePublicCustomContent: E = !1,
+    ...L
+  } = S, B = v(x ?? A ?? ["desktop", "tablet"]), R = v(k), { headerType: u, sideNavProps: P, headerElement: T } = a.useContext(z), { shouldBreakToBottomContent: l, shouldBreakToHeader: g } = G(u, P), p = [
+    q.displayName,
+    Q.displayName,
+    _.displayName,
+    b.displayName
+  ], D = [_.displayName, b.displayName], M = [J.displayName], N = (t) => t.type.displayName, O = (t) => j(c(t, R ? D : p)), c = (t, o = p) => {
+    const i = [];
+    return a.Children.forEach(t, (r) => {
+      if (a.isValidElement(r)) {
+        const s = N(r);
+        o.includes(s) ? i.push(r) : r.type === a.Fragment && i.push(...c(r.props.children, o));
+      }
+    }), i;
+  }, j = (t, o = p) => {
+    const i = [];
+    return o.forEach((r) => {
+      a.Children.forEach(t, (s) => {
+        a.isValidElement(s) && N(s) === r && i.push(s);
+      });
+    }), i;
+  }, V = X(n.header, {
+    [n["header--with-bottom-content"]]: l || !!d
+  });
+  return /* @__PURE__ */ m(I, { visibility: "hide", children: [
+    f && /* @__PURE__ */ e(Y, { ...f }),
+    C && /* @__PURE__ */ e(K, { ...C }),
+    /* @__PURE__ */ m("header", { "data-name": "header", ...L, ref: T, className: V, children: [
+      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(U, { ...w }),
+      /* @__PURE__ */ m("div", { className: n.header__content, children: [
+        /* @__PURE__ */ m("div", { className: n["header__content-left"], children: [
+          (u === "system" || E && !g) && B && c(h, M),
+          g && /* @__PURE__ */ e(H, {})
+        ] }),
+        /* @__PURE__ */ e(
+          Z,
+          {
+            className: n["header__content-right"],
+            wrap: "nowrap",
+            alignItems: "center",
+            gutterX: 4,
+            xl: { gutterX: 5 },
+            children: O(h).map((t, o) => /* @__PURE__ */ e($, { width: "auto", className: n["header__content-item"], children: t }, o))
+          }
+        )
+      ] })
+    ] }),
+    d && !l && /* @__PURE__ */ e(F, { position: "sticky", top: 0, relative: "window", className: n.header__affix, children: /* @__PURE__ */ e(y, { ...d }) }),
+    l && /* @__PURE__ */ e(
+      y,
+      {
+        cardProps: {
+          border: "top-border-default",
+          padding: 0.75,
+          borderRadius: !1
+        },
+        children: /* @__PURE__ */ e(H, {})
+      }
+    )
+  ] });
+};
+export {
+  ve as Header,
+  ve as default
+};

package/src/community/components/layout/header/header/header.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="header-f4fd7ab3",t="header__content-2e80dd3e",a="header__affix-4d533e6c",d={header:e,"header--with-bottom-content":"header--with-bottom-content-93a34aa7",header__content:t,header__affix:a,"header__content-left":"header__content-left-21016558","header__content-right":"header__content-right-c564dcda","header__content-item":"header__content-item-e69c0394","header-modal__close":"header-modal__close-824b7dc8"};exports.default=d;exports.header=e;exports.header__affix=a;exports.header__content=t;

package/src/community/components/layout/header/header/header.module.scss.es.js

@@ -0,0 +1,16 @@
+const e = "header-f4fd7ab3", t = "header__content-2e80dd3e", a = "header__affix-4d533e6c", d = {
+  header: e,
+  "header--with-bottom-content": "header--with-bottom-content-93a34aa7",
+  header__content: t,
+  header__affix: a,
+  "header__content-left": "header__content-left-21016558",
+  "header__content-right": "header__content-right-c564dcda",
+  "header__content-item": "header__content-item-e69c0394",
+  "header-modal__close": "header-modal__close-824b7dc8"
+};
+export {
+  d as default,
+  e as header,
+  a as header__affix,
+  t as header__content
+};

package/src/community/components/layout/header/index.d.ts

@@ -0,0 +1,9 @@
+export * from './header/header';
+export * from './components/header-bottom-content/header-bottom-content';
+export * from './components/header-content/header-content';
+export * from './components/header-dropdown/header-dropdown';
+export * from './components/header-language/header-language';
+export * from './components/header-modal/header-modal';
+export * from './components/header-role/header-role';
+export * from './components/header-settings/header-settings';
+export * from './components/skip-links/skip-links';

package/src/community/components/layout/index.d.ts

@@ -0,0 +1,6 @@
+export * from './breadcrumbs/breadcrumbs';
+export * from './footer/footer';
+export * from './header';
+export * from './layout/layout';
+export * from './layout-context';
+export * from './sidenav/sidenav';

package/src/community/components/layout/layout/layout.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),U=require("../../../../tedi/components/content/section/section.cjs.js"),$=require("../../../../tedi/helpers/hooks/use-element-size.cjs.js"),k=require("../../../../tedi/providers/accessibility-provider/accessibility-provider.cjs.js"),H=require("../breadcrumbs/breadcrumbs.cjs.js"),z=require("../footer/footer.cjs.js"),A=require("../layout-context.cjs.js"),D=require("../sidenav/sidenav.cjs.js"),G=require("../sidenav/utility.cjs.js"),t=require("./layout.module.scss.cjs.js"),J=require("../header/header/header.cjs.js"),K=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),q=j=>{var b;const{children:_,header:P,sideNav:s,breadcrumbsProps:m,footer:f,mainContentId:R="main-content",mainContentClassName:S,mainLogo:i,growMainContent:E,headerType:g="system",onHeaderSidenavToggle:c,...C}=j,N=r.useRef(null),h=r.useRef(null),[n,p]=r.useState(!1),v=r.useRef(n),{hasSidenav:M}=G.useSidenavRendered(g,s),x=!!((b=s==null?void 0:s.navItems)!=null&&b.length),{y:w,refs:y,context:l}=a.useFloating({placement:"bottom-start",open:n,onOpenChange:x?p:void 0,whileElementsMounted:(...u)=>K.autoUpdate(...u,{ancestorScroll:!1})}),o=$.useElementSize(h),F=a.useClick(l),I=a.useRole(l,{role:"dialog"}),O=a.useDismiss(l),{getReferenceProps:L,getFloatingProps:B}=a.useInteractions(x?[F,I,O]:[]),T=d.default(t.default.main,{[t.default["main--with-sidenav"]]:M,[t.default["main--grow"]]:E});return r.useEffect(()=>(document&&o&&document.documentElement.style.setProperty("--header-bottom-height",`${(o==null?void 0:o.height)??0}px`),()=>{document.documentElement.style.removeProperty("--header-bottom-height")}),[o]),r.useEffect(()=>{v.current!==n&&c&&c(n),v.current=n},[n,c]),e.jsx(A.LayoutContext.Provider,{value:{y:w,menuOpen:n,toggleMenu:()=>p(u=>!u),headerType:g,reference:y.setReference,floating:y.setFloating,context:l,getReferenceProps:L,getFloatingProps:B,sideNavProps:s,headerElement:N,headerBottomElement:h,headerBottomSize:o,onHeaderSidenavToggle:c},children:e.jsx(k.AccessibilityProvider,{children:e.jsxs("div",{"data-name":"layout",...C,className:t.default["container-wrapper"],children:[e.jsx(J.Header,{...P}),e.jsxs("div",{className:d.default(t.default.container,{[t.default["container--menu-open"]]:n}),children:[s&&e.jsx(D.SideNav,{...s}),e.jsxs("div",{className:T,children:[i&&e.jsx("img",{className:t.default.main__logos,src:i.src,alt:i.alt,style:i.style}),e.jsxs("main",{className:d.default(t.default.main__content,S),id:R,tabIndex:-1,children:[m&&e.jsx(U.Section,{children:e.jsx(H.Breadcrumbs,{className:t.default.main__breadcrumbs,...m})}),_]})]})]}),f&&e.jsx(z.Footer,{...f})]})})})};exports.Layout=q;exports.default=q;

package/src/community/components/layout/layout/layout.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { BreadcrumbsProps } from '../breadcrumbs/breadcrumbs';
+import { FooterProps } from '../footer/footer';
+import { HeaderProps } from '../header';
+import { SideNavProps } from '../sidenav/sidenav';
+export interface ILayoutProps<B extends React.ElementType = 'a', S extends React.ElementType = 'a', H extends React.ElementType = 'a'> {
+    /**
+     * Main content of the application
+     */
+    children: React.ReactElement;
+    /**
+     * Header props passed to Header component
+     */
+    header: HeaderProps<H>;
+    /**
+     * SideNav props passed to SideNav component
+     */
+    sideNav?: SideNavProps<S>;
+    /**
+     * Main content id, used to navigate from skip-links
+     * @default main-content
+     */
+    mainContentId?: string;
+    /**
+     * Main content className
+     */
+    mainContentClassName?: string;
+    /**
+     * Footer props passed to Footer component
+     */
+    footer?: FooterProps;
+    /**
+     * Remove max-width and padding from main. Allows the content to take all available space.
+     */
+    growMainContent?: boolean;
+    /**
+     * Breadcrumbs props passed to Breadcrumbs component
+     */
+    breadcrumbsProps?: BreadcrumbsProps<B>;
+    /**
+     * Logo shown on top-right of the main content area
+     */
+    mainLogo?: {
+        src: string;
+        alt: string;
+        style: React.CSSProperties;
+    };
+    /**
+     * Type of the Header
+     * - System header is meant for logged in system
+     * - Public is meant for public pages where user is not yet signed in, usually also does not have sidenav on desktop
+     * @default 'system'
+     */
+    headerType?: 'system' | 'public';
+    /**
+     * Custom toggle function for mobile menu
+     * If provided, SidenavToggle will be shown and this function will be called when toggled
+     * @param menuOpen - The current state of the menu (true if open, false if closed)
+     * @default undefined
+     */
+    onHeaderSidenavToggle?: (menuOpen: boolean) => void;
+}
+export declare const Layout: <B extends React.ElementType = "a", S extends React.ElementType = "a", H extends React.ElementType = "a">(props: ILayoutProps<B, S, H>) => JSX.Element;
+export default Layout;