@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
77 lines (76 loc) • 2.85 kB
JavaScript
"use client";
import { t as z } from "../../x-KjMYhcCb.js";
import { t as B } from "../../dist-EV-1XXQr.js";
import { t as o } from "../../utils-COaoD3PI.js";
import { t as C } from "../../Combination-DFcElBFt.js";
import { DrawerContext as F } from "./contexts/Drawer.context.js";
import { Header as I } from "./components/Header/Header.js";
import { Body as M } from "./components/Body/Body.js";
import { Footer as j } from "./components/Footer/Footer.js";
import { buttonCloseVariants as k, drawerVariants as A, overlayVariants as K, resizeHandleVariants as P } from "./Drawer.variants.js";
import "./constants/index.js";
import { useDrawer as R } from "./hooks/useDrawer.js";
import { useId as T, useMemo as E } from "react";
import { createPortal as L } from "react-dom";
import { jsx as e, jsxs as l } from "react/jsx-runtime";
var d = ({ canResize: t = !1, children: f, className: u, classNames: r, container: c, defaultWidth: m = 500, isOpen: p, maxWidth: h, minWidth: w, position: i = "right", showCloseButton: y = !0, theme: v, onClose: a }) => {
const n = T(), { handleKeyDown: b, handleMouseDown: D, isAnimating: s, isVisible: x, translateClass: V, width: H } = R({
canResize: t,
defaultWidth: m,
isOpen: p,
maxWidth: h,
minWidth: w,
position: i,
onClose: a
}), g = E(() => ({
classNames: r,
headerId: n
}), [r, n]);
return x ? L(/* @__PURE__ */ e(F.Provider, {
value: g,
children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ l("div", {
className: o("fixed inset-0 z-40", r?.root),
"data-theme": v,
children: [/* @__PURE__ */ e("div", {
className: o(K(), {
"opacity-50": s,
"opacity-0": !s
}, r?.overlay),
"aria-hidden": "true",
onClick: a,
role: "presentation"
}), /* @__PURE__ */ l("div", {
className: o(A({ position: i }), V, r?.panel, u),
style: { width: t ? H : m },
role: "dialog",
"aria-modal": "true",
"aria-labelledby": n,
children: [
t && /* @__PURE__ */ e("button", {
type: "button",
"aria-label": "Resize drawer",
className: o(P({ position: i }), r?.resizeHandle),
onMouseDown: D,
onKeyDown: b
}),
y && /* @__PURE__ */ l("button", {
className: o(k(), r?.closeButton),
onClick: a,
type: "button",
children: [/* @__PURE__ */ e(z, { size: 20 }), /* @__PURE__ */ e(B, { children: "Dismiss drawer" })]
}),
/* @__PURE__ */ e("div", {
className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
children: f
})
]
})]
}) })
}), c || document.body) : null;
};
d.Header = I;
d.Body = M;
d.Footer = j;
export {
d as Drawer
};