@stihl-design-system/components/chunks/Header.DPafHEKw.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as _, jsxs as me, Fragment as ve } from "react/jsx-runtime";
import { d as P } from "./index.CgTHIF3K.js";
import { c as w } from "./index.CEyLAtio.js";
import Ae, { useState as T, useEffect as ae, useContext as re, createContext as De, useRef as te } from "react";
import { g as Y, p as ce } from "./helpers.CcqWV-wZ.js";
import { u as He } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { DSLogo as Pe } from "../logo.B9taqlZR.js";
import '../assets/Header.DO34x-dO.css';const Ee = (d) => {
  const e = P.c(3), t = 0, [r, n] = T("down");
  let a, i;
  return e[0] !== t ? (a = () => {
    let l;
    l = window.scrollY;
    const c = () => {
      const o = window.scrollY, m = o > l ? "down" : "up";
      Math.abs(o - l) > t && (n(m), l = o);
    };
    return window.addEventListener("scroll", c, {
      passive: !0
    }), () => window.removeEventListener("scroll", c);
  }, i = [t], e[0] = t, e[1] = a, e[2] = i) : (a = e[1], i = e[2]), ae(a, i), r;
}, ft = ["full", "main"], x = (d, e, t) => {
  let r = !1;
  const n = {
    fn: e,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- any is needed here to allow any React component type to be checked
    displayName: e.displayName || e.name
  };
  return Ae.Children.forEach(d, (a) => {
    if (r || !Ae.isValidElement(a)) return;
    if (a.type === n.fn) {
      r = !0;
      return;
    }
    const i = a.type, l = (
      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- any is needed here to allow any React component type to be checked
      i.displayName || i.name
    );
    if (typeof l == "string" && l === n.displayName) {
      r = !0;
      return;
    }
    const c = a.props;
    if (t && c.children && x(c.children, n.fn, t)) {
      r = !0;
      return;
    }
  }), r;
}, xe = ({
  hasBrandArea: d,
  hasPrimaryArea: e,
  hasSecondaryArea: t
}) => {
  if (d)
    throw new Error(Y("DSHeader", "A <DSTopBar.BrandArea> component was detected as a direct child of DSHeader. Please move it into the DSTopBar component."));
  if (e)
    throw new Error(Y("DSHeader", "A <DSTopBar.PrimaryArea> component was detected as a direct child of DSHeader. Please move it into the DSTopBar component."));
  if (t)
    throw new Error(Y("DSHeader", "A <DSTopBar.SecondaryArea> component was detected as a direct child of DSHeader. Please move it into the DSTopBar component."));
}, Te = "ds-top-bar_root_ryiho_1", Ce = "ds-top-bar_root--sticky_ryiho_47", Fe = "ds-top-bar_root--fixed_ryiho_51", Oe = "ds-top-bar_content_ryiho_59", Ve = "ds-top-bar_content--variant-full_ryiho_78", Re = "ds-top-bar_content--has-primary-area-and-secondary-area_ryiho_82", ke = "ds-top-bar_primary_ryiho_87", Me = "ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_ryiho_102", $e = "ds-top-bar_brand_ryiho_107", We = "ds-top-bar_content--has-primary-area_ryiho_82", Le = "ds-top-bar_content--has-primary-area--with-brand-add-on_ryiho_146", Ie = "ds-top-bar_brand-add-on_ryiho_210", Ye = "ds-top-bar_brand-add-on--double_ryiho_231", ze = "ds-top-bar_sub-title_ryiho_245", qe = "ds-top-bar_secondary_ryiho_271", Ue = "ds-top-bar_logo_ryiho_280", je = "ds-top-bar_logo--reduced_ryiho_290", u = {
  root: Te,
  rootSticky: Ce,
  rootFixed: Fe,
  content: Oe,
  contentVariantFull: Ve,
  contentHasPrimaryAreaAndSecondaryArea: Re,
  primary: ke,
  contentHasBrandAddOnWithPrimaryAreaAndSecondaryArea: Me,
  brand: $e,
  contentHasPrimaryArea: We,
  contentHasPrimaryAreaWithBrandAddOn: Le,
  brandAddOn: Ie,
  brandAddOnDouble: Ye,
  subTitle: ze,
  secondary: qe,
  logo: Ue,
  logoReduced: je
}, Ge = ({
  hasBrandArea: d,
  hasPrimaryArea: e,
  hasSecondaryArea: t
}) => {
  if (!d)
    throw new Error(Y("DSTopBar", "A <DSTopBar.BrandArea> component is required. Please include it as a child of DSTopBar."));
  if (!e && t)
    throw new Error(Y("DSTopBar", "A <DSTopBar.PrimaryArea> is required when using <DSTopBar.SecondaryArea>. Please include <DSTopBar.PrimaryArea> as a child of DSTopBar, or move the content from <DSTopBar.SecondaryArea> into <DSTopBar.PrimaryArea>."));
}, ue = (d) => d == null || typeof d == "object" && !Array.isArray(d) && d !== null && Object.keys(d).length === 0, pt = ["double", "single"], $ = (d) => {
  const e = P.c(28);
  let t, r, n, a;
  e[0] !== d ? ({
    children: t,
    className: r,
    rootClassName: a,
    ...n
  } = d, e[0] = d, e[1] = t, e[2] = r, e[3] = n, e[4] = a) : (t = e[1], r = e[2], n = e[3], a = e[4]);
  const {
    variant: i,
    isHeaderSticky: l,
    isMobile: c,
    topBarAreaRef: o,
    isStickyMainNavigationVisible: m,
    hasBrandAddOn: h
  } = re(z);
  let p, y;
  if (e[5] !== t || e[6] !== r || e[7] !== h || e[8] !== l || e[9] !== c || e[10] !== m || e[11] !== a || e[12] !== i) {
    const E = x(t, he), A = x(t, fe), s = x(t, pe);
    process.env.NODE_ENV !== "production" && Ge({
      hasBrandArea: E,
      hasPrimaryArea: A,
      hasSecondaryArea: s
    });
    let b;
    e[15] !== l || e[16] !== c || e[17] !== m || e[18] !== a ? (b = w(u.root, a, l ? {
      [u.rootSticky]: !c && m,
      [u.rootFixed]: !c && !m
    } : {}), e[15] = l, e[16] = c, e[17] = m, e[18] = a, e[19] = b) : b = e[19], p = b, y = w(u.content, r, {
      [u.contentHasPrimaryArea]: A && !h && !s,
      [u.contentHasPrimaryAreaWithBrandAddOn]: A && h && !s,
      [u.contentHasBrandAddOnWithPrimaryAreaAndSecondaryArea]: h && A && s,
      [u.contentHasPrimaryAreaAndSecondaryArea]: A && s && !h,
      [u.contentVariantFull]: i === "full"
    }), e[5] = t, e[6] = r, e[7] = h, e[8] = l, e[9] = c, e[10] = m, e[11] = a, e[12] = i, e[13] = p, e[14] = y;
  } else
    p = e[13], y = e[14];
  const g = y;
  let f;
  e[20] !== t || e[21] !== g || e[22] !== n ? (f = /* @__PURE__ */ _("section", { className: g, ...n, children: t }), e[20] = t, e[21] = g, e[22] = n, e[23] = f) : f = e[23];
  let v;
  return e[24] !== p || e[25] !== f || e[26] !== o ? (v = /* @__PURE__ */ _("div", { className: p, ref: o, children: f }), e[24] = p, e[25] = f, e[26] = o, e[27] = v) : v = e[27], v;
}, he = (d) => {
  const e = P.c(26), {
    children: t,
    className: r
  } = d, {
    logoProps: n,
    brandAddOnProps: a,
    setHasBrandAddOn: i
  } = re(z);
  let l;
  e[0] !== n ? (l = n || {}, e[0] = n, e[1] = l) : l = e[1];
  const {
    aria: c,
    logo: o,
    href: m,
    target: h
  } = l, p = o === void 0 ? "main" : o, y = m === void 0 ? "/" : m, g = h === void 0 ? "_self" : h;
  let f;
  e[2] !== a || e[3] !== t || e[4] !== i ? (f = () => {
    t || !ue(a) ? i == null || i(!0) : i == null || i(!1);
  }, e[2] = a, e[3] = t, e[4] = i, e[5] = f) : f = e[5];
  let v;
  e[6] !== a || e[7] !== t ? (v = [t, a], e[6] = a, e[7] = t, e[8] = v) : v = e[8], ae(f, v);
  let E;
  e[9] !== p ? (E = w(u.logo, {
    [u.logoReduced]: p.includes("reduced")
  }), e[9] = p, e[10] = E) : E = e[10];
  const A = E;
  let s;
  e[11] !== r ? (s = w(u.brand, r), e[11] = r, e[12] = s) : s = e[12];
  let b;
  e[13] !== c || e[14] !== y || e[15] !== p || e[16] !== A || e[17] !== g ? (b = /* @__PURE__ */ _(Pe, { className: A, aria: c, logo: p, href: y, target: g }), e[13] = c, e[14] = y, e[15] = p, e[16] = A, e[17] = g, e[18] = b) : b = e[18];
  let B;
  e[19] !== a ? (B = ue(a) ? void 0 : /* @__PURE__ */ _(_e, { ...a }), e[19] = a, e[20] = B) : B = e[20];
  let D;
  return e[21] !== t || e[22] !== B || e[23] !== s || e[24] !== b ? (D = /* @__PURE__ */ me("div", { className: s, children: [
    b,
    B,
    t
  ] }), e[21] = t, e[22] = B, e[23] = s, e[24] = b, e[25] = D) : D = e[25], D;
};
he.displayName = "DSTopBar.BrandArea";
const _e = (d) => {
  const e = P.c(10), {
    children: t,
    className: r,
    subTitle: n,
    variant: a
  } = d, i = a === void 0 ? "single" : a, l = i === "double";
  let c;
  e[0] !== r || e[1] !== l ? (c = w(u.brandAddOn, r, {
    [u.brandAddOnDouble]: l
  }), e[0] = r, e[1] = l, e[2] = c) : c = e[2];
  const o = c;
  let m;
  e[3] !== t || e[4] !== n || e[5] !== i ? (m = i === "single" ? t : /* @__PURE__ */ me(ve, { children: [
    /* @__PURE__ */ _("span", { children: t }),
    n && /* @__PURE__ */ _("span", { className: u.subTitle, children: n })
  ] }), e[3] = t, e[4] = n, e[5] = i, e[6] = m) : m = e[6];
  let h;
  return e[7] !== o || e[8] !== m ? (h = /* @__PURE__ */ _("span", { className: o, children: m }), e[7] = o, e[8] = m, e[9] = h) : h = e[9], h;
};
_e.displayName = "DSTopBar.BrandAddOn";
const fe = (d) => {
  const e = P.c(5), {
    children: t,
    className: r
  } = d;
  let n;
  e[0] !== r ? (n = w(u.primary, r), e[0] = r, e[1] = n) : n = e[1];
  let a;
  return e[2] !== t || e[3] !== n ? (a = /* @__PURE__ */ _("div", { className: n, children: t }), e[2] = t, e[3] = n, e[4] = a) : a = e[4], a;
};
fe.displayName = "DSTopBar.PrimaryArea";
const pe = (d) => {
  const e = P.c(5), {
    children: t,
    className: r
  } = d;
  let n;
  e[0] !== r ? (n = w(u.secondary, r), e[0] = r, e[1] = n) : n = e[1];
  let a;
  return e[2] !== t || e[3] !== n ? (a = /* @__PURE__ */ _("div", { className: n, children: t }), e[2] = t, e[3] = n, e[4] = a) : a = e[4], a;
};
pe.displayName = "DSTopBar.SecondaryArea";
$.BrandArea = he;
$.PrimaryArea = fe;
$.SecondaryArea = pe;
const Je = "ds-header_root_g2mvw_1", Ke = "ds-header_root--sticky_g2mvw_4", Qe = "ds-header_root--hidden_g2mvw_9", Xe = "ds-header_root--fixed_g2mvw_20", Ze = "ds-header_main-navigation-area_g2mvw_36", et = "ds-header_main-navigation-area--fixed_g2mvw_88", tt = "ds-header_main-navigation-area--fixed--visible_g2mvw_103", at = "ds-header_main-navigation-content_g2mvw_108", rt = "ds-header_main-navigation-content--variant-full_g2mvw_112", nt = "ds-header_header-placeholder_g2mvw_117", ot = "ds-header_header-placeholder--with-banner_g2mvw_120", N = {
  root: Je,
  rootSticky: Ke,
  rootHidden: Qe,
  rootFixed: Xe,
  mainNavigationArea: Ze,
  mainNavigationAreaFixed: et,
  mainNavigationAreaFixedVisible: tt,
  mainNavigationContent: at,
  mainNavigationContentVariantFull: rt,
  headerPlaceholder: nt,
  headerPlaceholderWithBanner: ot
}, z = De({
  variant: "main"
}), ne = (d) => {
  const e = P.c(58);
  let t, r, n, a, i, l, c;
  e[0] !== d ? ({
    children: r,
    brandAddOnProps: t,
    className: n,
    isHeaderSticky: l,
    variant: c,
    logoProps: a,
    ...i
  } = d, e[0] = d, e[1] = t, e[2] = r, e[3] = n, e[4] = a, e[5] = i, e[6] = l, e[7] = c) : (t = e[1], r = e[2], n = e[3], a = e[4], i = e[5], l = e[6], c = e[7]);
  const o = l === void 0 ? !1 : l, m = c === void 0 ? "main" : c, [h, p] = T(!1);
  let y;
  e[8] !== r ? (y = x(r, ne.BannerArea, !0), e[8] = r, e[9] = y) : y = e[9];
  const g = y, f = x(r, $.BrandArea), v = x(r, $.PrimaryArea), E = x(r, $.SecondaryArea);
  process.env.NODE_ENV !== "production" && xe({
    hasBrandArea: f,
    hasPrimaryArea: v,
    hasSecondaryArea: E
  });
  const A = Ee(), [s, b] = T(!1), B = te(null), D = te(null), oe = te(null), ye = te(null), [ie, Ne] = T(!1), [C, Se] = T(!1), [H, we] = T(!0), [se, Be] = T(!1);
  let q, U;
  e[10] !== o ? (q = () => {
    if (o) {
      const S = () => {
        b(window.innerWidth < 1024);
      };
      return S(), window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
    }
  }, U = [o], e[10] = o, e[11] = q, e[12] = U) : (q = e[11], U = e[12]), ae(q, U);
  let j, G;
  e[13] !== o ? (j = () => {
    if (o) {
      const S = () => {
        var L, I, ee;
        const Z = ((L = B.current) == null ? void 0 : L.offsetHeight) ?? 0, le = ((I = D.current) == null ? void 0 : I.offsetHeight) ?? 0, M = ((ee = oe.current) == null ? void 0 : ee.offsetHeight) ?? 0, W = document.documentElement;
        W.style.setProperty("--ds-banner-height", `${ce(Z)}rem`), W.style.setProperty("--ds-header-height", `${ce(le)}rem`), W.style.setProperty("--ds-top-bar-height", `${ce(M)}rem`);
      };
      return S(), window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
    }
  }, G = [o], e[13] = o, e[14] = j, e[15] = G) : (j = e[14], G = e[15]), He(j, G);
  let J;
  e[16] !== o || e[17] !== s || e[18] !== H || e[19] !== A ? (J = () => {
    if (o) {
      const S = () => {
        const M = D.current, W = !!M && window.scrollY <= M.offsetHeight;
        Ne(W);
        const L = ye.current, I = oe.current, ee = !!I && !!L && L.getBoundingClientRect().bottom > I.getBoundingClientRect().bottom;
        we(ee && !!M && window.scrollY <= M.offsetHeight);
      };
      window.addEventListener("scroll", S, {
        passive: !0
      }), S();
      const Z = D.current, le = !!Z && Z.getBoundingClientRect().bottom > 0;
      return s && Se(A === "up" && !le), s || Be(A === "up" && !H), () => {
        window.removeEventListener("scroll", S);
      };
    }
  }, e[16] = o, e[17] = s, e[18] = H, e[19] = A, e[20] = J) : J = e[20];
  let K;
  e[21] !== o || e[22] !== s || e[23] !== A ? (K = [o, s, A], e[21] = o, e[22] = s, e[23] = A, e[24] = K) : K = e[24], ae(J, K);
  let Q;
  e[25] !== n || e[26] !== C || e[27] !== o || e[28] !== ie || e[29] !== s ? (Q = w(N.root, n, o ? {
    [N.rootSticky]: s,
    [N.rootHidden]: s && !ie,
    [N.rootFixed]: s && C
  } : {}), e[25] = n, e[26] = C, e[27] = o, e[28] = ie, e[29] = s, e[30] = Q) : Q = e[30];
  const de = Q;
  let F;
  e[31] !== t || e[32] !== h || e[33] !== se || e[34] !== o || e[35] !== s || e[36] !== H || e[37] !== a || e[38] !== m ? (F = {
    variant: m,
    bannerAreaRef: B,
    brandAddOnProps: t,
    hasBrandAddOn: h,
    setHasBrandAddOn: p,
    isFixedMainNavigation: se,
    isHeaderSticky: o,
    isMobile: s,
    isStickyMainNavigationVisible: H,
    mainNavigationAreaRef: ye,
    topBarAreaRef: oe,
    logoProps: a
  }, e[31] = t, e[32] = h, e[33] = se, e[34] = o, e[35] = s, e[36] = H, e[37] = a, e[38] = m, e[39] = F) : F = e[39];
  let O;
  e[40] !== r || e[41] !== F ? (O = /* @__PURE__ */ _(z.Provider, { value: F, children: r }), e[40] = r, e[41] = F, e[42] = O) : O = e[42];
  let V;
  e[43] !== i || e[44] !== de || e[45] !== O ? (V = /* @__PURE__ */ _("header", { className: de, ...i, ref: D, children: O }), e[43] = i, e[44] = de, e[45] = O, e[46] = V) : V = e[46];
  let R;
  e[47] !== C || e[48] !== s ? (R = s && C && /* @__PURE__ */ _("div", { className: N.headerPlaceholder }), e[47] = C, e[48] = s, e[49] = R) : R = e[49];
  let k;
  e[50] !== g || e[51] !== s || e[52] !== H ? (k = !s && !H && /* @__PURE__ */ _("div", { className: g ? N.headerPlaceholderWithBanner : N.headerPlaceholder }), e[50] = g, e[51] = s, e[52] = H, e[53] = k) : k = e[53];
  let X;
  return e[54] !== V || e[55] !== R || e[56] !== k ? (X = /* @__PURE__ */ me(ve, { children: [
    V,
    R,
    k
  ] }), e[54] = V, e[55] = R, e[56] = k, e[57] = X) : X = e[57], X;
}, ge = (d) => {
  const e = P.c(4), {
    children: t,
    className: r
  } = d, {
    bannerAreaRef: n
  } = re(z);
  let a;
  return e[0] !== n || e[1] !== t || e[2] !== r ? (a = /* @__PURE__ */ _("div", { ref: n, className: r, children: t }), e[0] = n, e[1] = t, e[2] = r, e[3] = a) : a = e[3], a;
};
ge.displayName = "DSHeader.BannerArea";
const be = (d) => {
  const e = P.c(15), {
    children: t,
    className: r
  } = d, {
    variant: n,
    isFixedMainNavigation: a,
    isHeaderSticky: i,
    isMobile: l,
    isStickyMainNavigationVisible: c,
    mainNavigationAreaRef: o
  } = re(z);
  let m;
  e[0] !== r || e[1] !== a || e[2] !== i || e[3] !== l || e[4] !== c ? (m = w(N.mainNavigationArea, r, i ? {
    [N.mainNavigationAreaFixed]: !l && !c,
    [N.mainNavigationAreaFixedVisible]: !l && a
  } : {}), e[0] = r, e[1] = a, e[2] = i, e[3] = l, e[4] = c, e[5] = m) : m = e[5];
  const h = m, p = n === "full";
  let y;
  e[6] !== p ? (y = w(N.mainNavigationContent, {
    [N.mainNavigationContentVariantFull]: p
  }), e[6] = p, e[7] = y) : y = e[7];
  const g = y;
  let f;
  e[8] !== t || e[9] !== g ? (f = /* @__PURE__ */ _("div", { className: g, children: t }), e[8] = t, e[9] = g, e[10] = f) : f = e[10];
  let v;
  return e[11] !== o || e[12] !== h || e[13] !== f ? (v = /* @__PURE__ */ _("div", { className: h, ref: o, children: f }), e[11] = o, e[12] = h, e[13] = f, e[14] = v) : v = e[14], v;
};
be.displayName = "DSHeader.MainNavigationArea";
ne.BannerArea = ge;
ne.MainNavigationArea = be;
ne.displayName = "DSHeader";
export {
  pt as B,
  z as D,
  ft as H,
  ne as a,
  $ as b,
  x as c,
  Ge as d,
  ue as i,
  xe as v
};