/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-af8d194 | Cube Dev Team */
import { tasty } from "../../../../tasty/tasty.js";
import { ClearSlots } from "../../../../utils/react/Slots.js";
import { _Title } from "../../../content/Title.js";
import { Flex } from "../../../layout/Flex.js";
import { Dialog } from "../../Dialog/Dialog.js";
import { DialogTrigger } from "../../Dialog/DialogTrigger.js";
import { useNotificationsObserver } from "../hooks/use-notifications-observer.js";
import { NotificationsDialogProvider } from "./NotificationsDialogContext.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { VisuallyHidden } from "react-aria";

//#region src/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.tsx
function NotificationsDialogTrigger(props) {
	const { onCloseNotificationInBar, ...dialogTriggerProps } = props;
	useNotificationsObserver((args) => onCloseNotificationInBar?.(args));
	return /* @__PURE__ */ jsx(DialogTrigger, {
		...dialogTriggerProps,
		type: "popover"
	});
}
const StyledDialog = tasty(Dialog, { height: "auto calc(100vh - 12x)" });
const StyledDialogContent = tasty(Flex, { styles: {
	flow: "column",
	placeItems: "start start",
	scrollbar: "styled",
	height: "100%",
	radius: "0.5x",
	overflow: "auto"
} });
function NotificationsDialog(props) {
	const { children, title = "Notifications", ...dialogProps } = props;
	return /* @__PURE__ */ jsxs(StyledDialog, {
		...dialogProps,
		children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(_Title, { children: title }) }), /* @__PURE__ */ jsx(StyledDialogContent, { children: /* @__PURE__ */ jsx(NotificationsDialogProvider, { children: /* @__PURE__ */ jsx(ClearSlots, { children }) }) })]
	});
}

//#endregion
export { NotificationsDialog, NotificationsDialogTrigger };
//# sourceMappingURL=NotificationsDialogTrigger.js.map