@payfit/unity-components
Version:
54 lines (53 loc) • 2.11 kB
JavaScript
import { SidePanelDragIndicator as e } from "./parts/SidePanelDragIndicator.js";
import { forwardRef as t, useEffect as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { Dialog as o } from "react-aria-components/Dialog";
import { Modal as s, ModalOverlay as c } from "react-aria-components/Modal";
//#region src/components/side-panel/SidePanel.tsx
var l = r({ slots: {
overlay: [
"uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
"uy:fixed uy:inset-0 uy:isolate uy:z-30",
"uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
],
wrapper: [
"uy:w-full uy:md:w-[400px]",
"uy:fixed uy:bottom-0 uy:md:inset-y-200 uy:md:right-200",
"uy:bg-surface-neutral uy:rounded-t-200 uy:md:rounded-200 uy:shadow-flying",
"uy:flex uy:flex-col uy:h-[95svh] uy:md:max-h-[calc(100vh-2rem)]",
"uy:overflow-hidden",
"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out uy:md:data-[entering]:animate-slide-right-fade-in uy:md:data-[exiting]:animate-slide-right-fade-out"
],
content: ["uy:flex uy:flex-col uy:h-full uy:overflow-hidden uy:outline-none"]
} }), u = t(({ children: t, isOpen: r, onOpenChange: u, defaultOpen: d, isDismissable: f = !0, isKeyboardDismissDisabled: p = !1, disableScrollLocking: m = !1, ...h }, g) => {
let { overlay: _, wrapper: v, content: y } = l();
return n(() => {
m && (r ?? d) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
}, [
m,
r,
d
]), /* @__PURE__ */ i(c, {
className: _(),
isOpen: r,
onOpenChange: u,
defaultOpen: d,
isDismissable: f,
isKeyboardDismissDisabled: p,
children: /* @__PURE__ */ a(s, {
"data-dd-privacy": "allow",
...h,
ref: g,
className: v(),
"data-unity-side-panel": !0,
children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(o, {
className: y(),
children: t
})]
})
});
});
u.displayName = "SidePanel";
//#endregion
export { u as SidePanel, l as sidePanel };