@stihl-design-system/components/chunks/Accordion.CYIfNOWr.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as m, jsxs as V } from "react/jsx-runtime";
import { d as ye } from "./index.D-sRdssb.js";
import { c as W } from "./index.DL9mof6u.js";
import { forwardRef as fe, useRef as Se, useState as ge, useImperativeHandle as Ce, useEffect as _e } from "react";
import { DSHeading as ve } from "../heading.DHLpT4dc.js";
import { D as We } from "./Icon.CDLyB7Pv.js";
import { NumberIndicator as qe } from "../numberindicator.BdnPMogE.js";
import { g as ie } from "./helpers.CexwVao7.js";
import '../assets/Accordion.CzBGud45.css';const Oe = "ds-accordion_details_1qee7_1", Ne = "ds-accordion_summary_1qee7_119", we = "ds-accordion_summary--utility--m_1qee7_158", De = "ds-accordion_summary--flush_1qee7_187", xe = "ds-accordion_summary--small_1qee7_255", Ie = "ds-accordion_summary--x-small_1qee7_259", Ee = "ds-accordion_summary-content-wrapper_1qee7_264", Ae = "ds-accordion_summary-content-wrapper--flush_1qee7_270", Xe = "ds-accordion_summary-content-wrapper--chevron-left_1qee7_274", be = "ds-accordion_summary-content-wrapper--x-small_1qee7_278", Fe = "ds-accordion_heading-summary-wrapper_1qee7_282", Te = "ds-accordion_heading-summary_1qee7_282", Pe = "ds-accordion_heading-summary--x-small_1qee7_292", Re = "ds-accordion_hint_1qee7_296", Le = "ds-accordion_icon_1qee7_310", je = "ds-accordion_icon--open_1qee7_321", ze = "ds-accordion_icon--open-caret_1qee7_332", Me = "ds-accordion_content-wrapper_1qee7_344", He = "ds-accordion_content-wrapper--flush_1qee7_350", Ue = "ds-accordion_content-wrapper--small_1qee7_354", Ve = "ds-accordion_content-wrapper--x-small_1qee7_358", t = {
  details: Oe,
  summary: Ne,
  summaryUtilityM: we,
  summaryFlush: De,
  summarySmall: xe,
  summaryXSmall: Ie,
  summaryContentWrapper: Ee,
  summaryContentWrapperFlush: Ae,
  summaryContentWrapperChevronLeft: Xe,
  summaryContentWrapperXSmall: be,
  headingSummaryWrapper: Fe,
  headingSummary: Te,
  headingSummaryXSmall: Pe,
  hint: Re,
  icon: Le,
  iconOpen: je,
  iconOpenCaret: ze,
  contentWrapper: Me,
  contentWrapperFlush: He,
  contentWrapperSmall: Ue,
  contentWrapperXSmall: Ve
}, tt = ["medium", "small", "x-small"], rt = ["chevron", "caret"], nt = ["left", "right"], Ze = ({
  children: q,
  hint: Z,
  numberIndicatorValue: e,
  summary: n
}) => {
  if (!q)
    throw new Error(ie("DSAccordion", "The component requires children to be set."));
  if (!n)
    throw new Error(ie("DSAccordion", "The summary prop is required. Please add the summary prop to the DSAccordion component."));
  if (Z && (e || e === ""))
    throw new Error(ie("DSAccordion", "The hint and numberIndicator props cannot be used together. Please remove either the hint prop or the numberIndicatorValue prop."));
}, $e = fe((q, Z) => {
  const e = ye.c(73);
  let n, i, o, s, p, r, O, N, w, D;
  e[0] !== q ? ({
    children: n,
    summary: r,
    chevronPosition: O,
    className: i,
    hint: o,
    isFlush: N,
    isOpen: w,
    numberIndicatorValue: s,
    size: D,
    ...p
  } = q, e[0] = q, e[1] = n, e[2] = i, e[3] = o, e[4] = s, e[5] = p, e[6] = r, e[7] = O, e[8] = N, e[9] = w, e[10] = D) : (n = e[1], i = e[2], o = e[3], s = e[4], p = e[5], r = e[6], O = e[7], N = e[8], w = e[9], D = e[10]);
  const pe = O === void 0 ? "right" : O, a = N === void 0 ? !1 : N, l = w === void 0 ? !1 : w, d = D === void 0 ? "medium" : D;
  process.env.NODE_ENV !== "production" && Ze({
    children: n,
    hint: o,
    numberIndicatorValue: s,
    summary: r
  });
  const $ = pe === "right" ? "chevron" : "caret", c = Se(null), [de, ue] = ge(l);
  let I;
  e[11] === Symbol.for("react.memo_cache_sentinel") ? (I = () => c.current, e[11] = I) : I = e[11], Ce(Z, I);
  let E;
  e[12] === Symbol.for("react.memo_cache_sentinel") ? (E = () => {
    c.current && ue(c.current.open);
  }, e[12] = E) : E = e[12];
  let A;
  e[13] !== l ? (A = [l], e[13] = l, e[14] = A) : A = e[14], _e(E, A);
  let X, b;
  e[15] === Symbol.for("react.memo_cache_sentinel") ? (X = () => {
    const he = () => {
      c.current && ue(c.current.open);
    };
    return c.current?.addEventListener("toggle", he), () => {
      c.current?.removeEventListener("toggle", he);
    };
  }, b = [], e[15] = X, e[16] = b) : (X = e[15], b = e[16]), _e(X, b);
  let F, T, P;
  const x = typeof r == "object" && r !== void 0;
  x && ({
    headingSize: F,
    headingTag: T,
    headingText: P
  } = r);
  let R;
  e[17] !== i ? (R = W(t.details, i), e[17] = i, e[18] = R) : R = e[18];
  const k = R, B = d === "small", G = d === "x-small", J = !x;
  let L;
  e[19] !== a || e[20] !== B || e[21] !== G || e[22] !== J ? (L = W(t.summary, {
    [t.summaryFlush]: a,
    [t.summarySmall]: B,
    [t.summaryXSmall]: G,
    [t.summaryUtilityM]: J
  }), e[19] = a, e[20] = B, e[21] = G, e[22] = J, e[23] = L) : L = e[23];
  const K = L, Q = pe === "left", Y = d === "x-small";
  let j;
  e[24] !== a || e[25] !== Q || e[26] !== Y ? (j = W(t.summaryContentWrapper, {
    [t.summaryContentWrapperFlush]: a,
    [t.summaryContentWrapperChevronLeft]: Q,
    [t.summaryContentWrapperXSmall]: Y
  }), e[24] = a, e[25] = Q, e[26] = Y, e[27] = j) : j = e[27];
  const ee = j, te = d === "x-small";
  let z;
  e[28] !== te ? (z = W(t.headingSummary, {
    [t.headingSummaryXSmall]: te
  }), e[28] = te, e[29] = z) : z = e[29];
  const re = z, ne = $ === "chevron" && de, se = $ === "caret" && de;
  let M;
  e[30] !== ne || e[31] !== se ? (M = W(t.icon, {
    [t.iconOpen]: ne,
    [t.iconOpenCaret]: se
  }), e[30] = ne, e[31] = se, e[32] = M) : M = e[32];
  const ae = M, oe = d === "small", ce = d === "x-small";
  let H;
  e[33] !== a || e[34] !== oe || e[35] !== ce ? (H = W(t.contentWrapper, {
    [t.contentWrapperFlush]: a,
    [t.contentWrapperSmall]: oe,
    [t.contentWrapperXSmall]: ce
  }), e[33] = a, e[34] = oe, e[35] = ce, e[36] = H) : H = e[36];
  const le = H;
  let u;
  e[37] !== F || e[38] !== T || e[39] !== P || e[40] !== x || e[41] !== r ? (u = x ? /* @__PURE__ */ m(ve, { tag: T, size: F, children: P }) : r, e[37] = F, e[38] = T, e[39] = P, e[40] = x, e[41] = r, e[42] = u) : u = e[42];
  let h;
  e[43] !== s ? (h = (s || s?.trim() === "") && /* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(qe, { label: s }) }), e[43] = s, e[44] = h) : h = e[44];
  let _;
  e[45] !== re || e[46] !== u || e[47] !== h ? (_ = /* @__PURE__ */ V("div", { className: re, children: [
    u,
    h
  ] }), e[45] = re, e[46] = u, e[47] = h, e[48] = _) : _ = e[48];
  let y;
  e[49] !== o ? (y = o && /* @__PURE__ */ m("div", { className: t.hint, children: o }), e[49] = o, e[50] = y) : y = e[50];
  let f;
  e[51] !== _ || e[52] !== y ? (f = /* @__PURE__ */ V("div", { className: t.headingSummaryWrapper, children: [
    _,
    y
  ] }), e[51] = _, e[52] = y, e[53] = f) : f = e[53];
  const me = $ === "chevron" ? "chevron-down" : "caret-right";
  let S;
  e[54] !== ae || e[55] !== me ? (S = /* @__PURE__ */ m(We, { name: me, "aria-hidden": "true", className: ae }), e[54] = ae, e[55] = me, e[56] = S) : S = e[56];
  let g;
  e[57] !== ee || e[58] !== f || e[59] !== S ? (g = /* @__PURE__ */ V("div", { className: ee, children: [
    f,
    S
  ] }), e[57] = ee, e[58] = f, e[59] = S, e[60] = g) : g = e[60];
  let C;
  e[61] !== K || e[62] !== g ? (C = /* @__PURE__ */ m("summary", { className: K, children: g }), e[61] = K, e[62] = g, e[63] = C) : C = e[63];
  let v;
  e[64] !== n || e[65] !== le ? (v = /* @__PURE__ */ m("div", { className: le, children: n }), e[64] = n, e[65] = le, e[66] = v) : v = e[66];
  let U;
  return e[67] !== k || e[68] !== l || e[69] !== p || e[70] !== C || e[71] !== v ? (U = /* @__PURE__ */ V("details", { ...p, ref: c, className: k, open: l, children: [
    C,
    v
  ] }), e[67] = k, e[68] = l, e[69] = p, e[70] = C, e[71] = v, e[72] = U) : U = e[72], U;
});
$e.displayName = "DSAccordion";
export {
  tt as A,
  nt as C,
  $e as D,
  rt as a,
  Ze as v
};