@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/Modal/components/Dialog.js

@@ -1,172 +1,180 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { Stack } from "../../Stack/index.js";
-import { useModal } from "../ModalProvider.js";
-import { modal, modalBackdrop, modalContent, modalImage, modalImageContainer, positionModal, topModal } from "../styles.css.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js";
+import { Stack, init_Stack } from "../../Stack/index.js";
+import { init_ModalProvider, useModal } from "../ModalProvider.js";
+import { init_styles_css, modalStyle, positionModal, topModal } from "../styles.css.js";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
 import { createPortal } from "react-dom";
 
 //#region src/components/Modal/components/Dialog.tsx
-const stopCancel = (event) => {
-	event.preventDefault();
-	event.stopPropagation();
-};
-const Dialog = ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, style, ref }) => {
-	var _dialogRef$current2;
-	const [isVisible, setIsVisible] = useState(false);
-	const containerRef = useRef(document.createElement("div"));
-	const nonDefaultRef = useRef(null);
-	const dialogRef = ref !== null && ref !== void 0 ? ref : nonDefaultRef;
-	const onCloseRef = useRef(onClose);
-	const { registerModal, unregisterModal, openedModals, previsousOpenedModales } = useModal();
-	useEffect(() => {
-		setIsVisible(true);
-	}, []);
-	useEffect(() => {
-		registerModal({
-			id,
-			ref: dialogRef
-		});
-		return () => {
-			unregisterModal(id);
-		};
-	}, [
-		id,
-		registerModal,
-		unregisterModal,
-		dialogRef
-	]);
-	useEffect(() => {
-		const element = containerRef.current;
-		document.body.appendChild(element);
-		return () => {
-			if (document.body.contains(element)) document.body.removeChild(element);
-		};
-	}, []);
-	useEffect(() => {
-		onCloseRef.current = onClose;
-	}, [onClose]);
-	useEffect(() => {
-		var _dialogRef$current;
-		(_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 || _dialogRef$current.focus();
-	}, [dialogRef]);
-	useEffect(() => {
-		const previousOverflow = document.body.style.overflow;
-		if (preventBodyScroll) document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = previousOverflow;
-		};
-	}, [preventBodyScroll]);
-	const stopFocus = useCallback((event) => {
-		event.stopPropagation();
-	}, []);
-	const realPosition = [...openedModals].findIndex((object) => object.id === id);
-	const position = [...openedModals].reverse().findIndex((object) => object.id === id);
-	const modalAbove = openedModals[realPosition + 1];
-	const currentModalHeight = (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.offsetHeight;
-	let top = 0;
-	const handleKeyUp = useCallback((event) => {
+var stopCancel, Dialog;
+var init_Dialog = __esmMin(() => {
+	init_Stack();
+	init_ModalProvider();
+	init_styles_css();
+	init_objectSpread2();
+	stopCancel = (event) => {
+		event.preventDefault();
 		event.stopPropagation();
-		if (event.key === "Escape" && hideOnEsc) {
-			event.preventDefault();
-			onCloseRef.current();
-		}
-	}, [hideOnEsc]);
-	const handleClose = useCallback((event) => {
-		if (hideOnClickOutside && dialogRef.current && !dialogRef.current.contains(event.target) && position === 0) onCloseRef.current();
-	}, [
-		hideOnClickOutside,
-		position,
-		dialogRef
-	]);
-	const handleFocusTrap = useCallback((event) => {
-		var _dialogRef$current3;
-		event.stopPropagation();
-		if (event.key === "Escape") {
-			event.preventDefault();
-			return;
-		}
-		if (!(event.key === "Tab")) return;
-		const focusableEls = (_dialogRef$current3 = dialogRef.current) === null || _dialogRef$current3 === void 0 ? void 0 : _dialogRef$current3.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])");
-		if ((focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) === 0) event.preventDefault();
-		if (focusableEls) {
-			const elems = [...focusableEls];
-			const firstFocusableEl = elems[0];
-			const lastFocusableEl = elems.at(-1);
-			if (event.shiftKey) {
-				if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
-					if (lastFocusableEl instanceof HTMLElement) lastFocusableEl.focus();
+	};
+	Dialog = ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, style, ref }) => {
+		var _dialogRef$current2;
+		const [isVisible, setIsVisible] = useState(false);
+		const containerRef = useRef(document.createElement("div"));
+		const nonDefaultRef = useRef(null);
+		const dialogRef = ref !== null && ref !== void 0 ? ref : nonDefaultRef;
+		const onCloseRef = useRef(onClose);
+		const { registerModal, unregisterModal, openedModals, previsousOpenedModales } = useModal();
+		useEffect(() => {
+			setIsVisible(true);
+		}, []);
+		useEffect(() => {
+			registerModal({
+				id,
+				ref: dialogRef
+			});
+			return () => {
+				unregisterModal(id);
+			};
+		}, [
+			id,
+			registerModal,
+			unregisterModal,
+			dialogRef
+		]);
+		useEffect(() => {
+			const element = containerRef.current;
+			document.body.appendChild(element);
+			return () => {
+				if (document.body.contains(element)) document.body.removeChild(element);
+			};
+		}, []);
+		useEffect(() => {
+			onCloseRef.current = onClose;
+		}, [onClose]);
+		useEffect(() => {
+			var _dialogRef$current;
+			(_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 || _dialogRef$current.focus();
+		}, [dialogRef]);
+		useEffect(() => {
+			const previousOverflow = document.body.style.overflow;
+			if (preventBodyScroll) document.body.style.overflow = "hidden";
+			return () => {
+				document.body.style.overflow = previousOverflow;
+			};
+		}, [preventBodyScroll]);
+		const stopFocus = useCallback((event) => {
+			event.stopPropagation();
+		}, []);
+		const realPosition = [...openedModals].findIndex((object) => object.id === id);
+		const position = [...openedModals].reverse().findIndex((object) => object.id === id);
+		const modalAbove = openedModals[realPosition + 1];
+		const currentModalHeight = (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.offsetHeight;
+		let top = 0;
+		const handleKeyUp = useCallback((event) => {
+			event.stopPropagation();
+			if (event.key === "Escape" && hideOnEsc) {
+				event.preventDefault();
+				onCloseRef.current();
+			}
+		}, [hideOnEsc]);
+		const handleClose = useCallback((event) => {
+			if (hideOnClickOutside && dialogRef.current && !dialogRef.current.contains(event.target) && position === 0) onCloseRef.current();
+		}, [
+			hideOnClickOutside,
+			position,
+			dialogRef
+		]);
+		const handleFocusTrap = useCallback((event) => {
+			var _dialogRef$current3;
+			event.stopPropagation();
+			if (event.key === "Escape") {
+				event.preventDefault();
+				return;
+			}
+			if (!(event.key === "Tab")) return;
+			const focusableEls = (_dialogRef$current3 = dialogRef.current) === null || _dialogRef$current3 === void 0 ? void 0 : _dialogRef$current3.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])");
+			if ((focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) === 0) event.preventDefault();
+			if (focusableEls) {
+				const elems = [...focusableEls];
+				const firstFocusableEl = elems[0];
+				const lastFocusableEl = elems.at(-1);
+				if (event.shiftKey) {
+					if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
+						if (lastFocusableEl instanceof HTMLElement) lastFocusableEl.focus();
+						event.preventDefault();
+					}
+				} else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
+					if (firstFocusableEl instanceof HTMLElement) firstFocusableEl.focus();
 					event.preventDefault();
 				}
-			} else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
-				if (firstFocusableEl instanceof HTMLElement) firstFocusableEl.focus();
-				event.preventDefault();
 			}
+		}, [dialogRef]);
+		if ((modalAbove === null || modalAbove === void 0 ? void 0 : modalAbove.ref) && typeof modalAbove.ref === "object" && "current" in modalAbove.ref && currentModalHeight) {
+			var _modalAbove$ref$curre;
+			var _modalAbove$ref;
+			top = ((_modalAbove$ref$curre = modalAbove === null || modalAbove === void 0 || (_modalAbove$ref = modalAbove.ref) === null || _modalAbove$ref === void 0 || (_modalAbove$ref = _modalAbove$ref.current) === null || _modalAbove$ref === void 0 ? void 0 : _modalAbove$ref.offsetHeight) !== null && _modalAbove$ref$curre !== void 0 ? _modalAbove$ref$curre : 0) / 2 - currentModalHeight / 2 + 20;
 		}
-	}, [dialogRef]);
-	if ((modalAbove === null || modalAbove === void 0 ? void 0 : modalAbove.ref) && typeof modalAbove.ref === "object" && "current" in modalAbove.ref && currentModalHeight) {
-		var _modalAbove$ref$curre;
-		var _modalAbove$ref;
-		top = ((_modalAbove$ref$curre = modalAbove === null || modalAbove === void 0 || (_modalAbove$ref = modalAbove.ref) === null || _modalAbove$ref === void 0 || (_modalAbove$ref = _modalAbove$ref.current) === null || _modalAbove$ref === void 0 ? void 0 : _modalAbove$ref.offsetHeight) !== null && _modalAbove$ref$curre !== void 0 ? _modalAbove$ref$curre : 0) / 2 - currentModalHeight / 2 + 20;
-	}
-	const animation = openedModals.length > 1 && position === 0 && previsousOpenedModales.length < openedModals.length;
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: cn(backdropClassName, modalBackdrop({
-			open: true,
-			visible: isVisible
-		})),
-		"data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0,
-		"data-visible": isVisible,
-		onClick: handleClose,
-		onFocus: stopFocus,
-		onKeyDown: () => {},
-		children: /* @__PURE__ */ jsx("dialog", {
-			"aria-label": ariaLabel,
-			"aria-modal": true,
-			className: cn(className, modal({
-				animation,
-				image: !!image,
-				placement,
-				positivePosition: position > 0,
-				size
+		const animation = openedModals.length > 1 && position === 0 && previsousOpenedModales.length < openedModals.length;
+		return createPortal(/* @__PURE__ */ jsx("div", {
+			className: cn(backdropClassName, modalStyle.backdrop({
+				open: true,
+				visible: isVisible
 			})),
-			"data-size": size,
-			"data-testid": dataTestId,
-			id,
-			onCancel: stopCancel,
-			onClose: stopCancel,
-			onKeyDown: handleFocusTrap,
-			onKeyUp: handleKeyUp,
-			open: true,
-			ref: dialogRef,
-			style: _objectSpread2(_objectSpread2({}, assignInlineVars({
-				[topModal]: `-${top}px`,
-				[positionModal]: `${position * 50}px`
-			})), style),
-			tabIndex: 0,
-			children: image ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
-				alignItems: "flex-end",
-				className: modalImageContainer,
-				justifyContent: "center",
-				children: /* @__PURE__ */ jsx("img", {
-					alt: "illustration",
-					className: modalImage,
-					height: "auto",
-					src: image,
-					width: "auto"
-				})
-			}), /* @__PURE__ */ jsx(Stack, {
-				className: modalContent,
-				gap: 5,
-				children
-			})] }) : children
-		})
-	}), containerRef.current);
-};
+			"data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0,
+			"data-visible": isVisible,
+			onClick: handleClose,
+			onFocus: stopFocus,
+			onKeyDown: () => {},
+			children: /* @__PURE__ */ jsx("dialog", {
+				"aria-label": ariaLabel,
+				"aria-modal": true,
+				className: cn(className, modalStyle.modal({
+					animation,
+					image: !!image,
+					placement,
+					positivePosition: position > 0,
+					size
+				})),
+				"data-size": size,
+				"data-testid": dataTestId,
+				id,
+				onCancel: stopCancel,
+				onClose: stopCancel,
+				onKeyDown: handleFocusTrap,
+				onKeyUp: handleKeyUp,
+				open: true,
+				ref: dialogRef,
+				style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+					[topModal]: `-${top}px`,
+					[positionModal]: `${position * 50}px`
+				})), style),
+				tabIndex: 0,
+				children: image ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
+					alignItems: "flex-end",
+					className: modalStyle.imageContainer,
+					justifyContent: "center",
+					children: /* @__PURE__ */ jsx("img", {
+						alt: "illustration",
+						className: modalStyle.image,
+						height: "auto",
+						src: image,
+						width: "auto"
+					})
+				}), /* @__PURE__ */ jsx(Stack, {
+					className: modalStyle.content,
+					gap: 5,
+					children
+				})] }) : children
+			})
+		}), containerRef.current);
+	};
+});
 
 //#endregion
-export { Dialog };
+init_Dialog();
+export { Dialog, init_Dialog };

package/dist/components/Modal/components/Disclosure.js

@@ -1,44 +1,48 @@
 'use client';
-import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
 import { cloneElement, isValidElement, useEffect, useMemo } from "react";
 
 //#region src/components/Modal/components/Disclosure.tsx
-const Disclosure = ({ disclosure, handleOpen, visible, handleClose, toggle, id, ref }) => {
-	useEffect(() => {
-		const element = ref.current;
-		element === null || element === void 0 || element.addEventListener("click", handleOpen);
-		return () => {
-			element === null || element === void 0 || element.removeEventListener("click", handleOpen);
-		};
-	}, [
-		handleOpen,
-		ref,
-		disclosure
-	]);
-	const finalDisclosure = useMemo(() => {
-		if (typeof disclosure === "function") return disclosure({
-			close: handleClose,
-			modalId: id,
-			show: handleOpen,
+var Disclosure;
+var init_Disclosure = __esmMin(() => {
+	Disclosure = ({ disclosure, handleOpen, visible, handleClose, toggle, id, ref }) => {
+		useEffect(() => {
+			const element = ref.current;
+			element === null || element === void 0 || element.addEventListener("click", handleOpen);
+			return () => {
+				element === null || element === void 0 || element.removeEventListener("click", handleOpen);
+			};
+		}, [
+			handleOpen,
+			ref,
+			disclosure
+		]);
+		const finalDisclosure = useMemo(() => {
+			if (typeof disclosure === "function") return disclosure({
+				close: handleClose,
+				modalId: id,
+				show: handleOpen,
+				toggle,
+				visible
+			});
+			return disclosure;
+		}, [
+			disclosure,
+			handleOpen,
+			handleClose,
+			id,
 			toggle,
 			visible
+		]);
+		if (!isValidElement(finalDisclosure)) return null;
+		return cloneElement(finalDisclosure, {
+			"aria-controls": id,
+			"aria-haspopup": "dialog",
+			ref
 		});
-		return disclosure;
-	}, [
-		disclosure,
-		handleOpen,
-		handleClose,
-		id,
-		toggle,
-		visible
-	]);
-	if (!isValidElement(finalDisclosure)) return null;
-	return cloneElement(finalDisclosure, {
-		"aria-controls": id,
-		"aria-haspopup": "dialog",
-		ref
-	});
-};
+	};
+});
 
 //#endregion
-export { Disclosure };
+init_Disclosure();
+export { Disclosure, init_Disclosure };

package/dist/components/Modal/index.js

@@ -1,93 +1,96 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { ModalContext, ModalProvider } from "./ModalProvider.js";
-import { Disclosure } from "./components/Disclosure.js";
-import { ModalContent } from "./ModalContent.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { ModalContext, ModalProvider, init_ModalProvider } from "./ModalProvider.js";
+import { Disclosure, init_Disclosure } from "./components/Disclosure.js";
+import { ModalContent, init_ModalContent } from "./ModalContent.js";
 import { useCallback, useContext, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Modal/index.tsx
-/**
-* Modal is a component that allows you to display content on top of other content.
-* It is often used to display a dialog with additional information or to ask for a confirmation.
-*/
-const Modal = ({ ariaLabel = "modal", id, children, disclosure, hideOnClickOutside = true, hideOnEsc = true, isClosable = true, onClose, onBeforeClose, onOpen, open = false, placement = "center", preventBodyScroll = true, size = "small", className, "data-testid": dataTestId, backdropClassName, image, style, ref }) => {
-	const [visible, setVisible] = useState(false);
-	const controlId = useId();
-	const disclosureRef = useRef(null);
-	const handleOpen = useCallback(() => {
-		setVisible(true);
-		onOpen === null || onOpen === void 0 || onOpen();
-	}, [onOpen]);
-	const handleClose = useCallback(() => {
-		var _disclosureRef$curren;
-		(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
-		if (onClose) onClose();
-		else {
-			const promise = onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose();
-			if (promise && "catch" in promise) promise.catch(() => null);
-			setVisible(false);
-		}
-	}, [onBeforeClose, onClose]);
-	const handleToggle = useCallback(() => {
-		var _disclosureRef$curren2;
-		(_disclosureRef$curren2 = disclosureRef.current) === null || _disclosureRef$curren2 === void 0 || _disclosureRef$curren2.focus();
-		setVisible((current) => !current);
-	}, []);
-	const finalId = id !== null && id !== void 0 ? id : controlId;
-	const context = useContext(ModalContext);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [disclosure ? /* @__PURE__ */ jsx(Disclosure, {
-		disclosure,
-		handleClose,
-		handleOpen,
-		id: finalId,
-		ref: disclosureRef,
-		toggle: handleToggle,
-		visible
-	}) : null, context ? /* @__PURE__ */ jsx(ModalContent, {
-		ariaLabel,
-		backdropClassName,
-		className,
-		dataTestId,
-		finalId,
-		finalSize: size,
-		handleClose,
-		handleOpen,
-		handleToggle,
-		hideOnClickOutside,
-		hideOnEsc,
-		image,
-		isClosable,
-		open,
-		placement,
-		preventBodyScroll,
-		ref,
-		style,
-		visible,
-		children
-	}) : /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalContent, {
-		ariaLabel,
-		backdropClassName,
-		className,
-		dataTestId,
-		finalId,
-		finalSize: size,
-		handleClose,
-		handleOpen,
-		handleToggle,
-		hideOnClickOutside,
-		hideOnEsc,
-		image,
-		isClosable,
-		open,
-		placement,
-		preventBodyScroll,
-		ref,
-		style,
-		visible,
-		children
-	}) })] });
-};
+var Modal;
+var init_Modal = __esmMin(() => {
+	init_Disclosure();
+	init_ModalContent();
+	init_ModalProvider();
+	Modal = ({ ariaLabel = "modal", id, children, disclosure, hideOnClickOutside = true, hideOnEsc = true, isClosable = true, onClose, onBeforeClose, onOpen, open = false, placement = "center", preventBodyScroll = true, size = "small", className, "data-testid": dataTestId, backdropClassName, image, style, ref }) => {
+		const [visible, setVisible] = useState(false);
+		const controlId = useId();
+		const disclosureRef = useRef(null);
+		const handleOpen = useCallback(() => {
+			setVisible(true);
+			onOpen === null || onOpen === void 0 || onOpen();
+		}, [onOpen]);
+		const handleClose = useCallback(() => {
+			var _disclosureRef$curren;
+			(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
+			if (onClose) onClose();
+			else {
+				const promise = onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose();
+				if (promise && "catch" in promise) promise.catch(() => null);
+				setVisible(false);
+			}
+		}, [onBeforeClose, onClose]);
+		const handleToggle = useCallback(() => {
+			var _disclosureRef$curren2;
+			(_disclosureRef$curren2 = disclosureRef.current) === null || _disclosureRef$curren2 === void 0 || _disclosureRef$curren2.focus();
+			setVisible((current) => !current);
+		}, []);
+		const finalId = id !== null && id !== void 0 ? id : controlId;
+		const context = useContext(ModalContext);
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [disclosure ? /* @__PURE__ */ jsx(Disclosure, {
+			disclosure,
+			handleClose,
+			handleOpen,
+			id: finalId,
+			ref: disclosureRef,
+			toggle: handleToggle,
+			visible
+		}) : null, context ? /* @__PURE__ */ jsx(ModalContent, {
+			ariaLabel,
+			backdropClassName,
+			className,
+			dataTestId,
+			finalId,
+			finalSize: size,
+			handleClose,
+			handleOpen,
+			handleToggle,
+			hideOnClickOutside,
+			hideOnEsc,
+			image,
+			isClosable,
+			open,
+			placement,
+			preventBodyScroll,
+			ref,
+			style,
+			visible,
+			children
+		}) : /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalContent, {
+			ariaLabel,
+			backdropClassName,
+			className,
+			dataTestId,
+			finalId,
+			finalSize: size,
+			handleClose,
+			handleOpen,
+			handleToggle,
+			hideOnClickOutside,
+			hideOnEsc,
+			image,
+			isClosable,
+			open,
+			placement,
+			preventBodyScroll,
+			ref,
+			style,
+			visible,
+			children
+		}) })] });
+	};
+});
 
 //#endregion
-export { Modal };
+init_Modal();
+export { Modal, init_Modal };