@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
108 lines (107 loc) • 3.49 kB
JavaScript
"use client";
import { jsx as t, jsxs as F } from "react/jsx-runtime";
import { c as n } from "./index.DL9mof6u.js";
import { useRef as p, useState as R, useEffect as v } from "react";
import { D as k } from "./Button.Cn5yg7dG.js";
import { g as x } from "./helpers.CexwVao7.js";
import "./index.D-sRdssb.js";
import '../assets/Drawer.x3BCQvWE.css';const I = "ds-drawer_root_4nbv0_10", O = "ds-drawer_root--end_4nbv0_68", y = "ds-drawer_content-wrapper_4nbv0_169", z = "ds-drawer_content-wrapper--no-footer_4nbv0_175", L = "ds-drawer_close-button_4nbv0_178", M = "ds-drawer_header_4nbv0_191", P = "ds-drawer_content_4nbv0_169", j = "ds-drawer_footer_4nbv0_193", H = "ds-drawer_header--scrollable_4nbv0_214", T = "ds-drawer_header--close-button_4nbv0_223", A = "ds-drawer_content--no-footer_4nbv0_237", V = "ds-drawer_footer--scrollable_4nbv0_244", o = {
root: I,
rootEnd: O,
contentWrapper: y,
contentWrapperNoFooter: z,
closeButton: L,
header: M,
content: P,
footer: j,
headerScrollable: H,
headerCloseButton: T,
contentNoFooter: A,
footerScrollable: V
}, Y = ["start", "end"], q = ({
tabIndex: s
}) => {
if (s || s === 0)
throw new Error(x("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."));
}, Z = ({
children: s,
className: w,
closeButtonProps: m,
disableBackdropClose: D = !1,
footer: c,
header: S,
hideCloseButton: l = !1,
position: N = "start",
isOpen: d = !1,
onClose: a,
...i
}) => {
if (process.env.NODE_ENV !== "production") {
const {
tabIndex: e
} = i;
q({
tabIndex: e
});
}
const {
label: E = "Close modal",
...g
} = m || {}, r = p(null), _ = p(null), [u, B] = R(!1);
v(() => {
const e = _.current;
if (e) {
const f = () => {
B(e.scrollHeight > e.clientHeight);
};
f();
const h = new ResizeObserver(f);
return h.observe(e), () => {
h.disconnect();
};
}
}, []), v(() => {
const e = r.current;
if (e)
return e.addEventListener("close", b), d ? e.showModal() : e.close(), () => {
e.removeEventListener("close", b);
};
}, [d, a]);
const b = () => {
a && a();
}, C = (e) => {
D || r.current && e.target === r.current && r.current.close();
}, W = () => {
r.current && r.current.close();
};
return /* @__PURE__ */ t("dialog", { ...i, ref: r, className: n(o.root, {
[o.rootEnd]: N === "end"
}), onMouseDown: (e) => C(e), "aria-modal": "true", children: /* @__PURE__ */ F("div", { className: n(o.contentWrapper, w, {
[o.contentWrapperNoFooter]: !c
}), children: [
!l && /* @__PURE__ */ t(k, { ...g, className: o.closeButton, hideLabel: !0, iconName: "cross", size: "small", type: "button", variant: "ghost", onClick: () => W(), children: E }),
/* @__PURE__ */ t("header", { className: n(o.header, {
[o.headerCloseButton]: !l,
[o.headerScrollable]: u
}), children: S }),
/* @__PURE__ */ t(
"div",
{
ref: _,
className: n(o.content, {
[o.contentNoFooter]: !c
}),
tabIndex: 0,
children: s
}
),
c && /* @__PURE__ */ t("footer", { className: n(o.footer, {
[o.footerScrollable]: u
}), children: c })
] }) });
};
export {
Z as D,
Y as a,
q as v
};