@payfit/unity-components/dist/esm/components/side-panel/SidePanel.js

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, OverlayTriggerStateContext as s } from "react-aria-components/Dialog";
import { Modal as c, ModalOverlay as l } from "react-aria-components/Modal";
import { useOverlayTriggerState as u } from "react-stately/useOverlayTriggerState";
import { createPortal as d } from "react-dom";
//#region src/components/side-panel/SidePanel.tsx
var f = 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"
	},
	variants: { isModal: { false: {
		overlay: "uy:pointer-events-none",
		wrapper: "uy:pointer-events-auto"
	} } }
}), p = t(({ children: t, isOpen: r, onOpenChange: p, defaultOpen: m, isDismissable: h = !0, isKeyboardDismissDisabled: g = !1, isModal: _ = !0, disableScrollLocking: v = !1, "aria-label": y = "Side panel", "aria-labelledby": b, ...x }, S) => {
	let C = u({
		isOpen: r,
		onOpenChange: p,
		defaultOpen: m
	}), { overlay: w, wrapper: T, content: E } = f({ isModal: _ });
	return n(() => {
		v && (r ?? m) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
	}, [
		v,
		r,
		m
	]), _ ? /* @__PURE__ */ i(l, {
		className: w(),
		isOpen: r,
		onOpenChange: p,
		defaultOpen: m,
		isDismissable: h,
		isKeyboardDismissDisabled: g,
		children: /* @__PURE__ */ a(c, {
			"data-dd-privacy": "allow",
			...x,
			ref: S,
			className: T(),
			"data-unity-side-panel": !0,
			children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(o, {
				className: E(),
				children: t
			})]
		})
	}) : !C.isOpen || typeof document > "u" || !document.body ? null : d(/* @__PURE__ */ i(s.Provider, {
		value: C,
		children: /* @__PURE__ */ i("div", {
			className: w(),
			children: /* @__PURE__ */ a("div", {
				"data-dd-privacy": "allow",
				...x,
				ref: S,
				className: T(),
				"data-unity-side-panel": !0,
				onClickCapture: (e) => {
					e.target instanceof Element && e.target.closest("[slot=\"close\"]") && C.close();
				},
				onKeyDownCapture: (e) => {
					h && e.key === "Escape" && !g && C.close();
				},
				children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i("div", {
					"aria-label": b ? void 0 : y,
					"aria-labelledby": b,
					"aria-modal": !1,
					className: E(),
					role: "dialog",
					children: t
				})]
			})
		})
	}), document.body);
});
p.displayName = "SidePanel";
//#endregion
export { p as SidePanel, f as sidePanel };