@stihl-design-system/components/tablist.CRMbhl0A.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as g, jsxs as me } from "react/jsx-runtime";
import { d as ke } from "./chunks/index.CgTHIF3K.js";
import { c as re } from "./chunks/index.CEyLAtio.js";
import { useState as he, useRef as P, useEffect as xe } from "react";
import { h as ge } from "./chunks/has-window.ut_-aShB.js";
import { g as Ee } from "./chunks/helpers.CcqWV-wZ.js";
import { u as be } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { DSButton as Re } from "./button.Bt0-bRGX.js";
import { D as We } from "./chunks/Icon.CAXZUNWo.js";
import { NumberIndicator as Me } from "./numberindicator.BPWvqr7f.js";
import { g as Pe, a as Ie } from "./chunks/TabPane.utils.DG16Y2uD.js";
import { s as f, N as ze } from "./chunks/NavigationTabList.BeGdzxOj.js";
const pe = () => {
  if (ge) {
    const i = getComputedStyle(document.documentElement).getPropertyValue("--ds-animation-duration").trim();
    return i === "0s" || i === "0ms";
  } else
    return !0;
}, p = (i) => ge && (i == null ? void 0 : i.getBoundingClientRect()) || DOMRect.fromRect({
  x: 0,
  y: 0,
  width: 0,
  height: 0
}), z = 48, Ue = (i) => {
  const e = ke.c(62);
  let v, T, m, A, y, s, V, H, O, h, l;
  e[0] !== i ? ({
    aria: v,
    id: h,
    selectedTabIndex: s,
    setSelectedTabIndex: V,
    tabs: l,
    alignment: H,
    className: T,
    defaultSelectedTabIndex: O,
    isNavigation: m,
    onTabChange: A,
    ...y
  } = i, e[0] = i, e[1] = v, e[2] = T, e[3] = m, e[4] = A, e[5] = y, e[6] = s, e[7] = V, e[8] = H, e[9] = O, e[10] = h, e[11] = l) : (v = e[1], T = e[2], m = e[3], A = e[4], y = e[5], s = e[6], V = e[7], H = e[8], O = e[9], h = e[10], l = e[11]);
  const X = H === void 0 ? "left" : H, Le = O === void 0 ? 0 : O, [j, b] = he(Le), [Se, De] = he(!1), [Ne, Be] = he(!1);
  let _;
  e[12] === Symbol.for("react.memo_cache_sentinel") ? (_ = [], e[12] = _) : _ = e[12];
  const w = P(_), R = P(null), a = P(null), u = P(null), $ = P(!1), ve = P(s), ne = () => {
    ye(), Ce();
  };
  let q;
  e[13] === Symbol.for("react.memo_cache_sentinel") ? (q = [], e[13] = q) : q = e[13], be(() => {
    const n = new ResizeObserver(ne);
    return a.current && n.observe(a.current), () => {
      n.disconnect();
    };
  }, q);
  let F;
  e[14] !== X || e[15] !== l ? (F = [l, X], e[14] = X, e[15] = l, e[16] = F) : F = e[16], be(() => {
    var o;
    const n = ["16px 'STIHL Contraface Digital Text Regular'", "14px 'STIHL Contraface Digital Text Demi'", "16px 'STIHL Contraface Digital Text Bold'"];
    Promise.all(n.map(Ae)).then(() => {
      oe(s), K("next", s, "instant"), ye(), $.current = !0;
    }).catch(He);
    const t = () => {
      !$.current || !u.current || (r.matches ? u.current.style.transitionDuration = "0s" : u.current.style.transitionDuration = "");
    }, r = window.matchMedia("(prefers-reduced-motion: reduce)");
    return r.addEventListener("change", t), (o = a.current) == null || o.addEventListener("scroll", ne), () => {
      var c;
      r.removeEventListener("change", t), (c = a.current) == null || c.removeEventListener("scroll", ne);
    };
  }, F);
  let G;
  e[17] !== s ? (G = [s], e[17] = s, e[18] = G) : G = e[18], be(() => {
    if ($.current && (oe(s), m)) {
      const n = Te(s);
      b(s), K(n, s);
    }
    ve.current = s;
  }, G);
  let Q, J;
  e[19] !== j ? (Q = () => {
    var n;
    $.current && ((n = w.current[j]) == null || n.focus());
  }, J = [j], e[19] = j, e[20] = Q, e[21] = J) : (Q = e[20], J = e[21]), xe(Q, J);
  const I = (n) => {
    const t = Te(n);
    V(n), b(n), K(t, n), A && A(n);
  }, Te = (n) => {
    const t = p(a.current), r = p(w.current[n]);
    let o;
    return r.left - z < t.left ? o = "prev" : r.right + z > t.right ? o = "next" : o = s < n ? "next" : "prev", o;
  }, ye = () => {
    if (a.current && R.current) {
      const n = p(a.current), t = p(R.current);
      De(t.left < n.left), Be(t.right > n.right + 4);
    }
  };
  let U;
  e[22] === Symbol.for("react.memo_cache_sentinel") ? (U = (n) => {
    const t = n === void 0 ? 0 : n;
    ge && u.current && !pe() && !window.matchMedia("(prefers-reduced-motion: reduce)").matches && setTimeout(() => {
      u.current && (u.current.style.transitionDuration = "250ms");
    }, t);
  }, e[22] = U) : U = e[22];
  const we = U, Ce = () => {
    u.current && (u.current.style.transitionDuration = "0s", oe(ve.current), we());
  }, oe = (n) => {
    const t = u.current, r = p(w.current[n]), o = p(R.current), c = r.left - o.left;
    t && ($.current ? (t.style.width = `${r.width}px`, t.style.transform = `translateX(${c}px)`) : (t.style.transitionDuration = "0s", t.style.transform = `translateX(${c}px)`, t.style.width = `${r.width}px`, we(50)));
  }, se = (n, t) => {
    let r;
    e: switch (n.key) {
      case "ArrowLeft": {
        r = (t > 0 ? t : l.length) - 1, b(r);
        break e;
      }
      case "ArrowRight": {
        r = (t + 1) % l.length, b(r);
        break e;
      }
      case "Home": {
        r = 0, b(r);
        break e;
      }
      case "End": {
        r = l.length - 1, b(r);
        break e;
      }
      case "Enter":
      case " ": {
        I(t);
        return;
      }
      default:
        return;
    }
    if (r !== void 0) {
      const o = r > t ? "next" : "prev";
      setTimeout(() => K(o, r), 0);
    }
    n.preventDefault();
  }, ce = (n, t) => {
    let r;
    e: switch (n.key) {
      case "Tab": {
        if (n.shiftKey) {
          r = t - 1 < 0 ? 0 : t - 1, b(r), t !== 0 && n.preventDefault();
          break e;
        } else
          r = t + 1 > l.length - 1 ? t : t + 1, b(r), t !== l.length - 1 && n.preventDefault();
        break e;
      }
      case "Enter": {
        I(t);
        return;
      }
      default:
        return;
    }
    if (r !== void 0) {
      const o = r > t ? "next" : "prev";
      setTimeout(() => K(o, r), 0);
    }
  }, K = (n, t, r) => {
    const o = r === void 0 ? "smooth" : r, c = w.current[t], W = a.current, M = p(c), ue = p(W);
    let de;
    if (!(!c || !W)) {
      if (n === "prev") {
        if (M.left - z > ue.left)
          return;
        de = c.offsetLeft - z;
      } else {
        if (M.right + z < ue.right)
          return;
        de = c.offsetLeft + c.offsetWidth - ue.width + z;
      }
      W.scrollTo({
        left: de,
        behavior: pe() ? "instant" : o
      });
    }
  };
  let d;
  if (e[23] === Symbol.for("react.memo_cache_sentinel")) {
    d = (t) => {
      var o;
      const r = n(t);
      (o = a.current) == null || o.scrollTo({
        left: r,
        behavior: pe() ? "instant" : "smooth"
      });
    };
    const n = (t) => {
      if (!R.current || !a.current)
        return 0;
      const {
        scrollLeft: r,
        offsetWidth: o
      } = a.current, c = Math.round(o * 0.2);
      return t === "next" ? r + c : r - c;
    };
    e[23] = d;
  } else
    d = e[23];
  const le = X === "center";
  let Y;
  e[24] !== le ? (Y = re(f.scroller, {
    [f.scrollerCentered]: le
  }), e[24] = le, e[25] = Y) : Y = e[25];
  const Z = Y, ie = m ? "nav" : "div";
  let L;
  e[26] !== T ? (L = re(f.tabsWrapper, T), e[26] = T, e[27] = L) : L = e[27];
  let S;
  e[28] !== se || e[29] !== ce || e[30] !== m || e[31] !== Z || e[32] !== s || e[33] !== I || e[34] !== h || e[35] !== l ? (S = m ? /* @__PURE__ */ g(ze, { tabs: l, tabRefs: w, scrollerRef: R, handleNavigationKeydown: ce, scrollerClass: Z, selectedTabIndex: s, setSelectedTab: I }) : /* @__PURE__ */ g("div", { role: "tablist", className: Z, ref: R, children: l.map((n, t) => {
    const {
      id: r,
      label: o,
      iconName: c,
      numberIndicatorValue: W
    } = n;
    return /* @__PURE__ */ me("button", { id: Ie(h, r), role: "tab", "aria-selected": s === t, "aria-controls": Pe(h, r, t), tabIndex: s === t ? 0 : -1, className: f.tab, ref: (M) => {
      w.current[t] = M;
    }, onClick: () => I(t), onKeyDown: (M) => se(M, t), children: [
      c && /* @__PURE__ */ g(We, { name: c, "aria-hidden": "true" }),
      o,
      W && /* @__PURE__ */ g(Me, { label: W })
    ] }, Ie(h, r));
  }) }), e[28] = se, e[29] = ce, e[30] = m, e[31] = Z, e[32] = s, e[33] = I, e[34] = h, e[35] = l, e[36] = S) : S = e[36];
  let ee;
  e[37] === Symbol.for("react.memo_cache_sentinel") ? (ee = /* @__PURE__ */ g("span", { className: f.indicator, ref: u }), e[37] = ee) : ee = e[37];
  let D;
  e[38] !== ie || e[39] !== v || e[40] !== S ? (D = /* @__PURE__ */ me(ie, { className: f.scrollWrapper, ref: a, ...v, children: [
    S,
    ee
  ] }), e[38] = ie, e[39] = v, e[40] = S, e[41] = D) : D = e[41];
  const ae = !Se;
  let N;
  e[42] !== ae ? (N = re(f.scrollButton, {
    [f.scrollButtonHidden]: ae
  }), e[42] = ae, e[43] = N) : N = e[43];
  let B;
  e[44] !== d ? (B = () => d("prev"), e[44] = d, e[45] = B) : B = e[45];
  let C;
  e[46] !== N || e[47] !== B ? (C = /* @__PURE__ */ g(Re, { variant: "filled", className: N, hideLabel: !0, iconName: "chevron-left", tabIndex: -1, size: "small", onClick: B, children: "Left" }), e[46] = N, e[47] = B, e[48] = C) : C = e[48];
  const fe = !Ne;
  let k;
  e[49] !== fe ? (k = re(f.scrollButton, f.scrollButtonRight, {
    [f.scrollButtonHidden]: fe
  }), e[49] = fe, e[50] = k) : k = e[50];
  let x;
  e[51] !== d ? (x = () => d("next"), e[51] = d, e[52] = x) : x = e[52];
  let E;
  e[53] !== k || e[54] !== x ? (E = /* @__PURE__ */ g(Re, { variant: "filled", className: k, hideLabel: !0, iconName: "chevron-right", tabIndex: -1, size: "small", onClick: x, children: "Right" }), e[53] = k, e[54] = x, e[55] = E) : E = e[55];
  let te;
  return e[56] !== y || e[57] !== L || e[58] !== D || e[59] !== C || e[60] !== E ? (te = /* @__PURE__ */ me("div", { className: L, ...y, children: [
    D,
    C,
    E
  ] }), e[56] = y, e[57] = L, e[58] = D, e[59] = C, e[60] = E, e[61] = te) : te = e[61], te;
};
function Ae(i) {
  return document.fonts.load(i);
}
function He(i) {
  throw new Error(Ee("DSTabs", `The component requires the fonts to be loaded: ${i}`));
}
export {
  Ue as TabList
};