@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
103 lines (102 loc) • 3.35 kB
JavaScript
"use client";
import { jsx as n, jsxs as E } from "react/jsx-runtime";
import { c as r } from "./index.DL9mof6u.js";
import { useRef as g, useState as F, useEffect as v } from "react";
import { D as W } from "./Button.Cn5yg7dG.js";
import { g as x } from "./helpers.CexwVao7.js";
import "./index.D-sRdssb.js";
import '../assets/Dialog.DJkn65Es.css';const R = "ds-dialog_root_kvopn_5", y = "ds-dialog_content-wrapper_kvopn_166", z = "ds-dialog_content-wrapper--no-footer_kvopn_172", L = "ds-dialog_close-button_kvopn_180", M = "ds-dialog_header_kvopn_193", j = "ds-dialog_content_kvopn_166", H = "ds-dialog_footer_kvopn_195", I = "ds-dialog_header--scrollable_kvopn_216", O = "ds-dialog_header--close-button_kvopn_225", P = "ds-dialog_content--no-footer_kvopn_238", T = "ds-dialog_footer--scrollable_kvopn_245", o = {
root: R,
contentWrapper: y,
contentWrapperNoFooter: z,
closeButton: L,
header: M,
content: j,
footer: H,
headerScrollable: I,
headerCloseButton: O,
contentNoFooter: P,
footerScrollable: T
}, V = ({
tabIndex: s
}) => {
if (s || s === 0)
throw new Error(x("DSDialog", "Do not pass the tabindex property to the DSDialog component as it is not interactive and does not receive focus. The DSDialogs contents, including the close button contained in the DSDialog, can receive focus and be interactive."));
}, U = ({
children: s,
className: m,
closeButtonProps: b,
disableBackdropClose: D = !1,
footer: c,
header: S,
hideCloseButton: a = !1,
isOpen: i = !1,
onClose: l,
...d
}) => {
if (process.env.NODE_ENV !== "production") {
const {
tabIndex: e
} = d;
V({
tabIndex: e
});
}
const {
label: k = "Close dialog",
...N
} = b || {}, t = g(null), p = g(null), [u, B] = F(!1);
v(() => {
const e = p.current;
if (e) {
const _ = () => {
B(e.scrollHeight > e.clientHeight);
};
_();
const h = new ResizeObserver(_);
return h.observe(e), () => {
h.disconnect();
};
}
}, []), v(() => {
const e = t.current;
if (e)
return e.addEventListener("close", f), i ? e.showModal() : e.close(), () => {
e.removeEventListener("close", f);
};
}, [i, l]);
const f = () => {
l && l();
}, w = (e) => {
D || t.current && e.target === t.current && t.current.close();
}, C = () => {
t.current && t.current.close();
};
return /* @__PURE__ */ n("dialog", { ...d, ref: t, className: r(o.root, m), onMouseDown: (e) => w(e), "aria-modal": "true", children: /* @__PURE__ */ E("div", { className: r(o.contentWrapper, {
[o.contentWrapperNoFooter]: !c
}), children: [
!a && /* @__PURE__ */ n(W, { ...N, className: o.closeButton, hideLabel: !0, iconName: "cross", size: "small", type: "button", variant: "ghost", onClick: () => C(), children: k }),
/* @__PURE__ */ n("header", { className: r(o.header, {
[o.headerCloseButton]: !a,
[o.headerScrollable]: u
}), children: S }),
/* @__PURE__ */ n(
"div",
{
ref: p,
className: r(o.content, {
[o.contentNoFooter]: !c
}),
tabIndex: 0,
children: s
}
),
c && /* @__PURE__ */ n("footer", { className: r(o.footer, {
[o.footerScrollable]: u
}), children: c })
] }) });
};
export {
U as D,
V as v
};