@veracity/vui/dist/dialog/dialog.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { isJsx, isReactText } from "../utils/assertion.js";
import { random } from "../utils/number.js";
import { useIds } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { modalAnimation, modalJustifyContent } from "./consts.js";
import { DialogProvider } from "./context.js";
import Modal from "../modal/modal.js";
import DialogBody from "./dialogBody.js";
import DialogCancelButton from "./dialogCancelButton.js";
import DialogCloseButton from "./dialogCloseButton.js";
import DialogSubmitButton from "./dialogSubmitButton.js";
import DialogFooter from "./dialogFooter.js";
import DialogIcon from "./dialogIcon.js";
import DialogTitle from "./dialogTitle.js";
import DialogHeader from "./dialogHeader.js";
import { useEffect, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/dialog/dialog.tsx
/** @deprecated Use `Dialog.DismissButton` instead. Will be removed in VUI 6. */
const DeprecatedDialogCloseButton = vui((props, ref) => {
	useEffect(() => {
		console.warn("[VUI] `Dialog.CloseButton` is deprecated. Use `Dialog.DismissButton` instead. Will be removed in VUI 6.");
	}, []);
	return /* @__PURE__ */ jsx(DialogCloseButton, {
		ref,
		...props
	});
});
DeprecatedDialogCloseButton.displayName = "DialogCloseButton";
const DialogBase = styled.divBox`
  background-color: white;
  border-radius: 1px;
  box-shadow: modal;
  display: flex;
  flex-direction: column;
  width: 100%;
`;
/**
* Displays content in a Modal window. Includes required accessibility configuration.
*
* Dialog is built upon `Modal`.
*
* The content can include important information, like warnings or errors, simple forms or prompts for user's decision. It blocks interaction with the rest of the page, but often can be disabled by pressing Escape, clicking on the backdrop or close button.
*/
const Dialog = vui((props, ref) => {
	const { body: bodyProp, cancelButton, children, className, closeButton, disableBackdropClose, footer, header, icon, id, isOpen, modalProps: modalPropsProp, modalType = "dialog", placement = "center", onClose, size, status, submitButton, title, variant, ...rest } = props;
	const styles = useStyleConfig("Dialog", props);
	const [dialogId, bodyId, titleId] = useIds(useRef(id ?? random().toString()).current, [
		"dialog",
		"dialog-body",
		"dialog-title"
	]);
	const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp;
	const showHeader = Boolean(header || closeButton || icon || title);
	const showFooter = Boolean(footer || cancelButton || submitButton);
	const ariaProps = {
		"aria-describedby": bodyId,
		"aria-labelledby": titleId
	};
	const { zIndex: _zIndexFromProps, ...cleanModalProps } = {
		animation: modalAnimation[placement],
		contentProps: {
			alignItems: placement === "center" ? "center" : "auto",
			justifyContent: modalJustifyContent[placement],
			...modalPropsProp?.contentProps
		},
		...modalPropsProp
	};
	return /* @__PURE__ */ jsx(DialogProvider, {
		value: {
			bodyId,
			icon,
			isOpen,
			onClose,
			size,
			status,
			titleId,
			variant
		},
		children: /* @__PURE__ */ jsx(Modal, {
			isOpen,
			onClose,
			type: modalType,
			...cleanModalProps,
			disableBackdropClose,
			children: /* @__PURE__ */ jsx(DialogBase, {
				className: cs("vui-dialog", className),
				id: dialogId,
				maxH: placement === "center" ? "calc(100vh - 32px)" : "100%",
				ref,
				role: "dialog",
				...ariaProps,
				...styles.container,
				...rest,
				children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
					isJsx(header) ? header : showHeader && /* @__PURE__ */ jsx(DialogHeader, {
						closeButton,
						icon,
						title,
						...header
					}),
					isJsx(body) ? body : body && /* @__PURE__ */ jsx(DialogBody, { ...body }),
					isJsx(footer) ? footer : showFooter && /* @__PURE__ */ jsx(DialogFooter, {
						cancelButton,
						submitButton,
						...footer
					})
				] })
			})
		})
	});
});
Dialog.Body = DialogBody;
Dialog.CancelButton = DialogCancelButton;
/** @deprecated Renamed to `Dialog.DismissButton`. Will be removed in VUI 6. */
Dialog.CloseButton = DeprecatedDialogCloseButton;
Dialog.DismissButton = DialogCloseButton;
Dialog.Footer = DialogFooter;
Dialog.Header = DialogHeader;
Dialog.Icon = DialogIcon;
Dialog.SubmitButton = DialogSubmitButton;
Dialog.Title = DialogTitle;
Dialog.displayName = "Dialog";

//#endregion
export { DialogBase, Dialog as default };
globalThis.__vuiVersion__ = "5.3.0-alpha.2"
//# sourceMappingURL=dialog.js.map