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

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

import { mergeRefs } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { useDialogContext } from "./context.js";
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/dialog/dialogBody.tsx
/**
* Shows the main content between the Dialog Header and Footer.
* It becomes scrollable when content does not fit vertically. Borders are shown automatically.
* Receives more horizontal padding when Dialog has icon, so align text with title.
* Receives id linked to aria-describedby on the Dialog for accessibility.
*/
const DialogBody = vui((props, ref) => {
	const { className, ...rest } = props;
	const { bodyId, icon, status } = useDialogContext() ?? {};
	const styles = useStyleConfig("Dialog", useDialogContext());
	const [isScrolled, setIsScrolled] = useState(false);
	const bodyRef = useRef(null);
	const observerRef = useRef(new ResizeObserver(() => {
		if (bodyRef.current) {
			const { clientHeight, scrollHeight } = bodyRef.current;
			setIsScrolled(scrollHeight > clientHeight);
		}
	}));
	useEffect(() => {
		bodyRef.current && observerRef.current?.observe(bodyRef.current);
	}, []);
	const borderProps = isScrolled ? { borderColor: "grey.30" } : {};
	const paddingProps = (icon ?? status) !== void 0 ? { px: 8 } : { px: 3 };
	return /* @__PURE__ */ jsx(Box, {
		borderBottom: "1px solid transparent",
		borderTop: "1px solid transparent",
		className: cs("vui-dialogBody", className),
		column: true,
		id: bodyId,
		overflowY: "auto",
		pb: 2,
		pt: 1.5,
		ref: mergeRefs(ref, bodyRef),
		...borderProps,
		...paddingProps,
		...styles.body,
		...rest
	});
});
DialogBody.displayName = "DialogBody";

//#endregion
export { DialogBody, DialogBody as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=dialogBody.js.map