@ilo-org/react 0.20.0 → 0.21.0

package/lib/esm/_store/ContextMenu-chunk-D-riZIFp.js

@@ -0,0 +1,32 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as i, useId as u } from "react";
+import { c as a } from "./index-chunk-0LeqwHm8.js";
+import { u as d } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { createPortal as f } from "react-dom";
+const h = i(
+  ({ className: n, links: r, withPortal: m = !1 }, c) => {
+    const { prefix: t } = d(), l = u(), s = /* @__PURE__ */ o(
+      "ol",
+      {
+        className: a(`${t}--context-menu`, n),
+        id: `${t}--context-menu-${l}`,
+        ref: c,
+        children: r.map((e) => /* @__PURE__ */ o(
+          "li",
+          {
+            className: a(`${t}--context-menu--item`, {
+              endsection: e.endsection,
+              className: e.className
+            }),
+            children: /* @__PURE__ */ o("a", { href: e.url, className: `${t}--context-menu--link`, children: /* @__PURE__ */ o("span", { className: `${t}--context-menu--label`, children: e.label }) })
+          },
+          `${e.label}-${e.url}`
+        ))
+      }
+    );
+    return m ? f(s, document.body) : s;
+  }
+);
+export {
+  h as C
+};

package/lib/esm/_store/ContextMenu-entry-BN-vEJes.js

@@ -0,0 +1,4 @@
+import { C as t } from "./ContextMenu-chunk-D-riZIFp.js";
+export {
+  t as ContextMenu
+};

package/lib/esm/_store/{Hero-chunk-CZ6kSiY-.js → Hero-chunk-C1gFHcIP.js}

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { forwardRef as N, useMemo as v } from "react";
 import { c as k } from "./index-chunk-0LeqwHm8.js";
 import { u as x } from "./useGlobalSettings-chunk-gkijV3S1.js";
-import { B as w } from "./Breadcrumb-chunk-DcsXzPvT.js";
+import { B as w } from "./Breadcrumb-chunk-DcupgWDR.js";
 import { T as H } from "./Tooltip-chunk-EJOnwIYn.js";
 import { H as j } from "./HeroCard-chunk-3mxIZYwU.js";
 const I = N(

package/lib/esm/_store/Hero-entry-DWpRL6uz.js

@@ -0,0 +1,4 @@
+import { H as e } from "./Hero-chunk-C1gFHcIP.js";
+export {
+  e as Hero
+};

package/lib/esm/_store/LanguageToggle-chunk-CsayoJqR.js

@@ -0,0 +1,70 @@
+import { jsxs as i, jsx as c } from "react/jsx-runtime";
+import { forwardRef as R, useState as _, useRef as l, useLayoutEffect as m } from "react";
+import { u as w } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { c as f } from "./index-chunk-0LeqwHm8.js";
+import { C as N } from "./ContextMenu-chunk-D-riZIFp.js";
+const y = R(
+  ({ className: d, language: p, theme: g = "light", hideIcon: x, options: a, ...$ }, h) => {
+    const { prefix: C } = w(), [n, u] = _(!1), o = l(null), t = l(null), e = `${C}--language-toggle`;
+    return m(() => {
+      function r(s) {
+        !t.current || !o.current || !t.current.contains(s.target) && !o.current.contains(s.target) && u(!1);
+      }
+      return document.addEventListener("mousedown", r), () => {
+        document.removeEventListener("mousedown", r);
+      };
+    }), m(() => {
+      if (!(!o.current || !t.current) && n) {
+        const r = o.current.getBoundingClientRect(), s = t.current.getBoundingClientRect();
+        t.current.style.left = `${r.left + (r.width - s.width) / 2}px`, t.current.style.top = `${r.bottom}px`;
+      }
+    }, [n]), /* @__PURE__ */ i(
+      "div",
+      {
+        ref: h,
+        className: f(
+          e,
+          d,
+          `${e}__theme__${g}`,
+          {
+            [`${e}__open`]: n
+          }
+        ),
+        ...$,
+        children: [
+          /* @__PURE__ */ i(
+            "button",
+            {
+              className: `${e}--container`,
+              ref: o,
+              onClick: () => {
+                u(!n);
+              },
+              "aria-controls": `${e}--context-menu`,
+              "aria-expanded": n,
+              children: [
+                !x && /* @__PURE__ */ c("span", { className: `${e}--icon` }),
+                /* @__PURE__ */ c("span", { className: `${e}--action`, children: p }),
+                /* @__PURE__ */ c("span", { className: `${e}--arrow` })
+              ]
+            }
+          ),
+          a && /* @__PURE__ */ c(
+            N,
+            {
+              withPortal: !0,
+              ref: t,
+              links: a,
+              className: f(`${e}--context-menu`, {
+                [`${e}--context-menu__open`]: n
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  y as L
+};

package/lib/esm/_store/LanguageToggle-entry-D3t_X2Qk.js

@@ -0,0 +1,4 @@
+import { L as e } from "./LanguageToggle-chunk-CsayoJqR.js";
+export {
+  e as LanguageToggle
+};

package/lib/esm/_store/Nav-entry-CsQzrNK7.js

@@ -0,0 +1,4 @@
+import { S as o } from "./SubsiteNav-chunk-C97AqH9F.js";
+export {
+  o as SubsiteNav
+};

package/lib/esm/_store/SubsiteNav-chunk-C97AqH9F.js

@@ -0,0 +1,549 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { memo as j, useRef as L, useCallback as S, useEffect as z, useId as G, useState as C, forwardRef as I, useImperativeHandle as A } from "react";
+import { u as $ } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { createPortal as B } from "react-dom";
+import { c as d } from "./index-chunk-0LeqwHm8.js";
+import { L as D } from "./LanguageToggle-chunk-CsayoJqR.js";
+import { u as H } from "./useBreakpoint-chunk-DBZTYUx9.js";
+const q = ({
+  isOpen: s,
+  className: r,
+  navRef: c,
+  children: n
+}) => {
+  const { prefix: a } = $(), m = L(null), _ = `${a}--nav-dropdown`, u = S(() => {
+    if (!(m != null && m.current) || !(c != null && c.current))
+      return;
+    const i = c.current.getBoundingClientRect();
+    m.current.style.top = `${i.bottom}px`, m.current.style.width = `${i.width}px`;
+  }, [c]);
+  return z(() => (u(), window.addEventListener("resize", u), () => {
+    window.removeEventListener("resize", u);
+  }), [c]), B(
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: m,
+        className: d({
+          [_]: !0,
+          [`${_}--open`]: s,
+          className: r
+        }),
+        children: /* @__PURE__ */ e("div", { className: `${_}__container`, children: n })
+      }
+    ),
+    document.body
+  );
+}, P = j(q), v = (s) => {
+  const { label: r, component: c, isActive: n, ...a } = s;
+  return c ? /* @__PURE__ */ e(c, { ...a, isActive: n, children: r }) : /* @__PURE__ */ e("a", { ...a, children: r });
+}, y = ({ menu: s }) => {
+  const { prefix: r } = $(), c = `${r}--nav-menu-grid`, n = [];
+  for (let a = 0; a < s.length; a += 5)
+    n.push(s.slice(a, a + 5));
+  return /* @__PURE__ */ e("div", { className: c, children: n.map((a, m) => /* @__PURE__ */ e("div", { className: `${c}__column`, children: a.map((_) => {
+    var u;
+    return /* @__PURE__ */ e(
+      v,
+      {
+        className: `${c}__item`,
+        href: _.href,
+        label: _.label
+      },
+      (u = _.label) == null ? void 0 : u.toString()
+    );
+  }) }, m)) });
+}, x = ({
+  menu: s
+}) => {
+  const { prefix: r } = $(), c = `${r}--nav-mobile-menu`;
+  return /* @__PURE__ */ e("ul", { className: `${c}`, children: s.map((n, a) => /* @__PURE__ */ o("li", { className: `${c}__item`, children: [
+    /* @__PURE__ */ e(
+      v,
+      {
+        label: n.label,
+        href: n.href,
+        className: `${c}__link`
+      }
+    ),
+    n.isActive && /* @__PURE__ */ e("span", { className: `${c}__marked` })
+  ] }, a)) });
+}, M = ({
+  isOpen: s,
+  onClose: r,
+  header: c,
+  widgets: n,
+  children: a,
+  className: m
+}) => {
+  const { prefix: _ } = $(), u = G(), i = `${_}--nav-mobile-drawer`;
+  return B(
+    /* @__PURE__ */ o(
+      "div",
+      {
+        id: `${i}__${u}`,
+        className: d(i, m, {
+          [`${i}--open`]: s
+        }),
+        children: [
+          /* @__PURE__ */ o("div", { className: `${i}__header`, children: [
+            /* @__PURE__ */ e("div", { className: `${i}__header-main`, children: c }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: `${i}__header-close`,
+                onClick: r,
+                "aria-label": "Close navigation",
+                children: /* @__PURE__ */ e("span", { className: `${i}__header-close__icon` })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o("div", { className: `${i}__container`, children: [
+            /* @__PURE__ */ e("div", { className: `${i}__widgets`, children: n }),
+            a
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}, F = ({
+  options: s,
+  selected: r
+}) => {
+  const c = (s == null ? void 0 : s.map((a) => ({
+    label: a.label,
+    href: a.url
+  }))) || [], n = [{ label: r, href: "#", isActive: !0 }, ...c];
+  return /* @__PURE__ */ e(x, { menu: n });
+}, T = ({
+  isOpen: s,
+  navigationProps: {
+    branding: r,
+    menu: { items: c, labels: n },
+    widgets: a
+  },
+  onClose: m
+}) => {
+  var f, k, O;
+  const { prefix: _ } = $(), [u, i] = C(!1), [b, h] = C(!1), p = S(() => {
+    i(!1), h(!1);
+  }, []), t = `${_}--nav-mobile`, N = u || b, l = c.slice(0, 5), g = c.slice(5);
+  return /* @__PURE__ */ o(
+    M,
+    {
+      isOpen: s,
+      onClose: m,
+      header: /* @__PURE__ */ o("div", { className: `${t}__branding`, children: [
+        /* @__PURE__ */ e("div", { className: `${t}__logo`, children: r.logo.drawer || r.logo.main }),
+        /* @__PURE__ */ e("h3", { className: `${t}__name`, children: r.name })
+      ] }),
+      widgets: /* @__PURE__ */ o("div", { className: `${t}__widgets`, children: [
+        (a == null ? void 0 : a.search) && /* @__PURE__ */ o(
+          "a",
+          {
+            className: `${t}__widgets-search`,
+            href: a.search.url,
+            "aria-label": "Search",
+            children: [
+              /* @__PURE__ */ e("span", { className: `${t}__widgets-search__label`, children: a.search.label }),
+              /* @__PURE__ */ e("span", { className: `${t}__widgets-search__icon` })
+            ]
+          }
+        ),
+        (a == null ? void 0 : a.link) && /* @__PURE__ */ e(
+          v,
+          {
+            className: `${t}__widgets-link`,
+            href: a.link.href,
+            "aria-label": a.link.label,
+            label: a.link.label
+          }
+        ),
+        (a == null ? void 0 : a.language) && /* @__PURE__ */ o(
+          "button",
+          {
+            className: `${t}__widgets-language`,
+            onClick: () => h(!0),
+            "aria-expanded": b,
+            "aria-controls": "language-list",
+            "aria-label": "Select language",
+            children: [
+              /* @__PURE__ */ o("span", { className: `${t}__widgets-language__label`, children: [
+                a.language.label,
+                ": ",
+                a.language.language
+              ] }),
+              /* @__PURE__ */ e("span", { className: `${t}__widgets-language__icon` })
+            ]
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ e(x, { menu: l }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: `${t}__more`,
+            onClick: () => i(!0),
+            "aria-expanded": u,
+            "aria-controls": "more-items",
+            "aria-label": "More items",
+            children: [
+              n.more,
+              /* @__PURE__ */ e("span", { className: `${t}__more__icon` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          M,
+          {
+            className: `${t}__nested`,
+            header: /* @__PURE__ */ o(
+              "button",
+              {
+                className: `${t}__nested__header`,
+                onClick: p,
+                "aria-label": "Back to menu",
+                children: [
+                  /* @__PURE__ */ e("span", { className: `${t}__nested__header__icon` }),
+                  n.backToMenu
+                ]
+              }
+            ),
+            widgets: /* @__PURE__ */ e("span", { className: `${t}__nested__title`, children: u ? n.more : (f = a == null ? void 0 : a.language) == null ? void 0 : f.label }),
+            isOpen: N,
+            onClose: p,
+            "aria-modal": "true",
+            children: u ? /* @__PURE__ */ e(x, { menu: g, id: "more-items" }) : /* @__PURE__ */ e(
+              F,
+              {
+                selected: ((k = a == null ? void 0 : a.language) == null ? void 0 : k.language) || "",
+                options: (O = a == null ? void 0 : a.language) == null ? void 0 : O.options,
+                id: "language-list"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function E({ menu: s, split: r }) {
+  const { breakpoint: c } = H(), [n, a] = C(!1), [m, _] = C(!1), u = L(null), i = ["xl", "xxl"].includes(c || "md"), b = i ? r.desktop : r.mobile, h = s.slice(0, b), p = s.slice(b);
+  return {
+    menu: { facade: h, more: p },
+    more: [n, a],
+    mobile: [m, _],
+    isDesktop: i,
+    ref: u
+  };
+}
+const X = ({ className: s, menu: r, more: c }) => {
+  const { prefix: n } = $(), a = `${n}--nav-menu`;
+  return /* @__PURE__ */ o("div", { className: d(a, s), children: [
+    /* @__PURE__ */ e("ul", { className: `${a}__list`, children: r.map((m) => {
+      var _;
+      return /* @__PURE__ */ e("li", { className: `${a}__item`, children: /* @__PURE__ */ e(
+        v,
+        {
+          ...m,
+          className: d({
+            [`${a}__link`]: !0,
+            [`${a}__link--active`]: m.isActive,
+            [m.className || ""]: m.className
+          })
+        }
+      ) }, (_ = m.label) == null ? void 0 : _.toString());
+    }) }),
+    c && /* @__PURE__ */ o(
+      "button",
+      {
+        onClick: c.onClick,
+        className: d({
+          [`${a}__more`]: !0,
+          [`${a}__more--open`]: c.isOpen
+        }),
+        "aria-expanded": c.isOpen,
+        "aria-haspopup": "menu",
+        children: [
+          c.label,
+          /* @__PURE__ */ e("span", { className: `${a}__more-icon` })
+        ]
+      }
+    )
+  ] });
+}, J = I(
+  ({
+    props: {
+      branding: s,
+      menu: { items: r, labels: c },
+      widgets: n
+    }
+  }, a) => {
+    const { prefix: m } = $(), {
+      menu: { facade: _, more: u },
+      more: [i, b],
+      mobile: [h, p],
+      isDesktop: t,
+      ref: N
+    } = E({ menu: r, split: { desktop: 4, mobile: 2 } });
+    A(a, () => N.current);
+    const l = `${m}--subsite-nav-compact`;
+    return /* @__PURE__ */ o("header", { ref: N, className: l, children: [
+      /* @__PURE__ */ o("div", { className: `${l}__container`, children: [
+        /* @__PURE__ */ o("nav", { className: `${l}__nav`, children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: `${l}__branding`,
+              onClick: s == null ? void 0 : s.onClick,
+              role: "button",
+              "aria-label": "Branding",
+              tabIndex: 0,
+              children: [
+                /* @__PURE__ */ e("div", { className: `${l}__branding-logo`, children: s.logo.main }),
+                /* @__PURE__ */ e("h3", { className: `${l}__branding-name`, children: s.name })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            X,
+            {
+              className: `${l}__menu`,
+              menu: _,
+              more: {
+                label: c.more,
+                onClick: () => b(!i),
+                isOpen: i
+              }
+            }
+          )
+        ] }),
+        n && /* @__PURE__ */ o("div", { className: `${l}__widget-bar`, children: [
+          /* @__PURE__ */ e("span", { className: `${l}__widget-bar-corner` }),
+          /* @__PURE__ */ o("div", { className: `${l}__widget-bar-content`, children: [
+            n.link && /* @__PURE__ */ e(
+              v,
+              {
+                className: `${l}__widget-bar-link`,
+                href: n.link.href,
+                label: n.link.label
+              }
+            ),
+            n.language && /* @__PURE__ */ e("div", { className: `${l}__widget-bar-language`, children: /* @__PURE__ */ e(
+              D,
+              {
+                theme: "dark",
+                ...n.language,
+                hideIcon: !t
+              }
+            ) }),
+            n.search && /* @__PURE__ */ e(
+              v,
+              {
+                href: n.search.url,
+                className: `${l}__widget-bar-search`,
+                label: "",
+                "aria-label": n.search.label
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `${l}__burger`,
+            "aria-label": "Toggle navigation",
+            "aria-expanded": h,
+            onClick: () => p(!h),
+            children: /* @__PURE__ */ e("span", { className: `${l}__burger-icon` })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(P, { isOpen: i, navRef: N, children: /* @__PURE__ */ e(y, { menu: u }) }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          isOpen: h,
+          onClose: () => {
+            p(!1);
+          },
+          navigationProps: {
+            widgets: n,
+            branding: s,
+            menu: {
+              items: r,
+              labels: c
+            }
+          }
+        }
+      )
+    ] });
+  }
+), K = I(
+  ({
+    props: {
+      branding: s,
+      menu: { items: r, labels: c },
+      widgets: n
+    }
+  }, a) => {
+    var g, f, k;
+    const { prefix: m } = $(), {
+      menu: { facade: _, more: u },
+      more: [i, b],
+      mobile: [h, p],
+      isDesktop: t,
+      ref: N
+    } = E({ menu: r, split: { desktop: 6, mobile: 5 } });
+    A(a, () => N.current);
+    const l = `${m}--subsite-nav-complex`;
+    return /* @__PURE__ */ o("header", { ref: N, className: l, children: [
+      /* @__PURE__ */ e("div", { className: d(`${l}-bg--light`), children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: d(
+            `${l}__widgets`,
+            `${l}__container`
+          ),
+          children: [
+            /* @__PURE__ */ e("span", { className: `${l}__widgets-bar-corner` }),
+            /* @__PURE__ */ o("span", { className: `${l}__widgets-bar`, children: [
+              (n == null ? void 0 : n.link) && /* @__PURE__ */ e(
+                v,
+                {
+                  href: n.link.href,
+                  label: n.link.label,
+                  className: `${l}__widgets-bar__link`
+                }
+              ),
+              (n == null ? void 0 : n.language) && /* @__PURE__ */ e(
+                D,
+                {
+                  className: `${l}__widgets-bar__language`,
+                  ...n.language,
+                  hideIcon: !t
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: d(`${l}-bg--light`), children: /* @__PURE__ */ o(
+        "div",
+        {
+          className: d(
+            `${l}__branding`,
+            `${l}__container`
+          ),
+          children: [
+            /* @__PURE__ */ o("div", { className: `${l}__branding-main`, children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `${l}__branding-main__logo`,
+                  onClick: s == null ? void 0 : s.onClick,
+                  role: "button",
+                  "aria-label": "Branding",
+                  tabIndex: 0,
+                  children: s.logo.main
+                }
+              ),
+              /* @__PURE__ */ e("h3", { className: `${l}__branding-main__name`, children: s.name })
+            ] }),
+            /* @__PURE__ */ o("div", { className: `${l}__branding-tag`, children: [
+              /* @__PURE__ */ e("h4", { className: `${l}__branding-tag__main`, children: (g = s.tag) == null ? void 0 : g.main }),
+              ((f = s.tag) == null ? void 0 : f.sub) && /* @__PURE__ */ e("span", { className: `${l}__branding-tag__sub`, children: (k = s.tag) == null ? void 0 : k.sub })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: d(`${l}-bg--dark`), children: /* @__PURE__ */ o(
+        "nav",
+        {
+          className: d(
+            `${l}__nav`,
+            `${l}__container`
+          ),
+          children: [
+            /* @__PURE__ */ o("div", { className: `${l}__nav-mobile`, children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `${l}__nav-mobile__logo`,
+                  onClick: s == null ? void 0 : s.onClick,
+                  role: "button",
+                  "aria-label": "Branding",
+                  tabIndex: 0,
+                  children: s.logo.mobile
+                }
+              ),
+              /* @__PURE__ */ e("h3", { className: `${l}__nav-mobile__name`, children: s.name })
+            ] }),
+            /* @__PURE__ */ e(
+              X,
+              {
+                className: `${l}__nav-menu`,
+                menu: _,
+                more: {
+                  label: c.more,
+                  onClick: () => b(!i),
+                  isOpen: i
+                }
+              }
+            ),
+            (n == null ? void 0 : n.search) && /* @__PURE__ */ e(
+              "a",
+              {
+                className: `${l}__nav-search`,
+                href: n.search.url,
+                "aria-label": n.search.label,
+                children: /* @__PURE__ */ e("span", { className: `${l}__nav-search__icon` })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: `${l}__nav-burger`,
+                "aria-label": "Toggle navigation",
+                "aria-expanded": h,
+                onClick: () => p(!h),
+                children: /* @__PURE__ */ e("span", { className: `${l}__nav-burger__icon` })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(P, { isOpen: i, navRef: N, children: /* @__PURE__ */ e(y, { menu: u }) }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          isOpen: h,
+          onClose: () => {
+            p(!1);
+          },
+          navigationProps: {
+            widgets: n,
+            branding: s,
+            menu: {
+              items: r,
+              labels: c
+            }
+          }
+        }
+      )
+    ] });
+  }
+), Q = {
+  complex: K,
+  compact: J
+}, ee = I(
+  ({ type: s = "compact", props: r }, c) => {
+    const n = Q[s];
+    return /* @__PURE__ */ e(n, { ref: c, props: r });
+  }
+);
+export {
+  ee as S
+};