@veracity/vui/dist/tutorial/tutorial.js

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

import { cs } from "../utils/styles.js";
import { TutorialCard } from "./tutorialCard.js";
import { cloneElement, isValidElement } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { FloatingPortal, autoUpdate, offset, shift, useFloating } from "@floating-ui/react";

//#region src/tutorial/tutorial.tsx
/** Popover Tutorial is used to display information about a new, or existing feature. */
function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement = "right", showSkipButton, isVisible = false, includeFinalPage = true, useContentTitle = false }) {
	const onClose = (e) => {
		if (e === "dismissed") onDismiss?.();
		if (e === "finished") onFinish?.();
	};
	const { refs, floatingStyles } = useFloating({
		open: isVisible,
		placement,
		middleware: [offset({
			mainAxis: 2,
			crossAxis: 0
		}), shift({ padding: 5 })],
		whileElementsMounted: isVisible ? autoUpdate : void 0
	});
	const childElement = isValidElement(children) ? cloneElement(children, { ref: refs.setReference }) : children;
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [childElement, isVisible && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", {
		ref: refs.setFloating,
		style: floatingStyles,
		children: /* @__PURE__ */ jsx(TutorialCard, {
			actionLabel,
			className: cs("vui-tutorial", className),
			onAction,
			onDismiss: () => onClose("dismissed"),
			onFinish: () => onClose("finished"),
			showSkipButton,
			steps,
			title,
			includeFinalPage,
			useContentTitle
		})
	}) })] });
}
Tutorial.displayName = "Tutorial";

//#endregion
export { Tutorial };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=tutorial.js.map