@stihl-design-system/components/chunks/Drawer.BVTvx276.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as x, jsxs as oe } from "react/jsx-runtime";
import { d as re } from "./index.CgTHIF3K.js";
import { c as F } from "./index.CEyLAtio.js";
import { useRef as X, useState as se, useEffect as Y } from "react";
import { D as ne } from "./Button.Cf1CKq8N.js";
import { g as le } from "./helpers.BbWkXTr3.js";
import '../assets/Drawer.VOvWQoEr.css';const ce = "ds-drawer_root_4nbv0_10", ae = "ds-drawer_root--end_4nbv0_68", ie = "ds-drawer_content-wrapper_4nbv0_169", de = "ds-drawer_content-wrapper--no-footer_4nbv0_175", fe = "ds-drawer_close-button_4nbv0_178", _e = "ds-drawer_header_4nbv0_191", pe = "ds-drawer_content_4nbv0_169", ue = "ds-drawer_footer_4nbv0_193", be = "ds-drawer_header--scrollable_4nbv0_214", he = "ds-drawer_header--close-button_4nbv0_223", me = "ds-drawer_content--no-footer_4nbv0_237", ve = "ds-drawer_footer--scrollable_4nbv0_244", o = {
  root: ce,
  rootEnd: ae,
  contentWrapper: ie,
  contentWrapperNoFooter: de,
  closeButton: fe,
  header: _e,
  content: pe,
  footer: ue,
  headerScrollable: be,
  headerCloseButton: he,
  contentNoFooter: me,
  footerScrollable: ve
}, ge = ["start", "end"], we = ({
  tabIndex: c
}) => {
  if (c || c === 0)
    throw new Error(le("DSDrawer", "Do not pass the tabindex property to the DSDrawer component as it is not interactive and does not receive focus. The DSDrawers contents, including the close button contained in the DSDrawer, can receive focus and be interactive."));
}, ke = (c) => {
  const e = re.c(61);
  let a, i, d, r, f, s, n, E, g, k, O;
  e[0] !== c ? ({
    children: a,
    className: i,
    closeButtonProps: d,
    disableBackdropClose: E,
    footer: r,
    header: f,
    hideCloseButton: g,
    position: k,
    isOpen: O,
    onClose: s,
    ...n
  } = c, e[0] = c, e[1] = a, e[2] = i, e[3] = d, e[4] = r, e[5] = f, e[6] = s, e[7] = n, e[8] = E, e[9] = g, e[10] = k, e[11] = O) : (a = e[1], i = e[2], d = e[3], r = e[4], f = e[5], s = e[6], n = e[7], E = e[8], g = e[9], k = e[10], O = e[11]);
  const H = E === void 0 ? !1 : E, R = g === void 0 ? !1 : g, Z = k === void 0 ? "start" : k, y = O === void 0 ? !1 : O;
  if (process.env.NODE_ENV !== "production") {
    const {
      tabIndex: t
    } = n;
    we({
      tabIndex: t
    });
  }
  let _;
  e[12] !== d ? (_ = d || {}, e[12] = d, e[13] = _) : _ = e[13];
  let p, W;
  e[14] !== _ ? ({
    label: W,
    ...p
  } = _, e[14] = _, e[15] = p, e[16] = W) : (p = e[15], W = e[16]);
  const T = W === void 0 ? "Close modal" : W, l = X(null), J = X(null), [u, ee] = se(!1);
  let I, P;
  e[17] === Symbol.for("react.memo_cache_sentinel") ? (I = () => {
    const t = J.current;
    if (t) {
      const Q = () => {
        ee(t.scrollHeight > t.clientHeight);
      };
      Q();
      const U = new ResizeObserver(Q);
      return U.observe(t), () => {
        U.disconnect();
      };
    }
  }, P = [], e[17] = I, e[18] = P) : (I = e[17], P = e[18]), Y(I, P);
  let z;
  e[19] !== y || e[20] !== s ? (z = [y, s], e[19] = y, e[20] = s, e[21] = z) : z = e[21], Y(() => {
    const t = l.current;
    if (t)
      return t.addEventListener("close", K), y ? t.showModal() : t.close(), () => {
        t.removeEventListener("close", K);
      };
  }, z);
  const K = () => {
    s && s();
  };
  let L;
  e[22] !== H ? (L = (t) => {
    H || l.current && t.target === l.current && l.current.close();
  }, e[22] = H, e[23] = L) : L = e[23];
  const A = L;
  let M;
  e[24] === Symbol.for("react.memo_cache_sentinel") ? (M = () => {
    l.current && l.current.close();
  }, e[24] = M) : M = e[24];
  const te = M, V = Z === "end";
  let b;
  e[25] !== V ? (b = F(o.root, {
    [o.rootEnd]: V
  }), e[25] = V, e[26] = b) : b = e[26];
  let h;
  e[27] !== A ? (h = (t) => A(t), e[27] = A, e[28] = h) : h = e[28];
  const $ = !r;
  let m;
  e[29] !== i || e[30] !== $ ? (m = F(o.contentWrapper, i, {
    [o.contentWrapperNoFooter]: $
  }), e[29] = i, e[30] = $, e[31] = m) : m = e[31];
  let v;
  e[32] !== R || e[33] !== T || e[34] !== p ? (v = !R && /* @__PURE__ */ x(ne, { ...p, className: o.closeButton, hideLabel: !0, iconName: "cross", size: "small", type: "button", variant: "ghost", onClick: () => te(), children: T }), e[32] = R, e[33] = T, e[34] = p, e[35] = v) : v = e[35];
  const q = !R;
  let w;
  e[36] !== u || e[37] !== q ? (w = F(o.header, {
    [o.headerCloseButton]: q,
    [o.headerScrollable]: u
  }), e[36] = u, e[37] = q, e[38] = w) : w = e[38];
  let S;
  e[39] !== f || e[40] !== w ? (S = /* @__PURE__ */ x("header", { className: w, children: f }), e[39] = f, e[40] = w, e[41] = S) : S = e[41];
  const G = !r;
  let D;
  e[42] !== G ? (D = F(o.content, {
    [o.contentNoFooter]: G
  }), e[42] = G, e[43] = D) : D = e[43];
  let N;
  e[44] !== a || e[45] !== D ? (N = /* @__PURE__ */ x("div", { ref: J, className: D, tabIndex: 0, children: a }), e[44] = a, e[45] = D, e[46] = N) : N = e[46];
  let B;
  e[47] !== r || e[48] !== u ? (B = r && /* @__PURE__ */ x("footer", { className: F(o.footer, {
    [o.footerScrollable]: u
  }), children: r }), e[47] = r, e[48] = u, e[49] = B) : B = e[49];
  let C;
  e[50] !== m || e[51] !== v || e[52] !== S || e[53] !== N || e[54] !== B ? (C = /* @__PURE__ */ oe("div", { className: m, children: [
    v,
    S,
    N,
    B
  ] }), e[50] = m, e[51] = v, e[52] = S, e[53] = N, e[54] = B, e[55] = C) : C = e[55];
  let j;
  return e[56] !== n || e[57] !== b || e[58] !== h || e[59] !== C ? (j = /* @__PURE__ */ x("dialog", { ...n, ref: l, className: b, onMouseDown: h, "aria-modal": "true", children: C }), e[56] = n, e[57] = b, e[58] = h, e[59] = C, e[60] = j) : j = e[60], j;
};
export {
  ke as D,
  ge as a,
  we as v
};