@ultraviolet/ui 3.8.2 → 3.10.0

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

@@ -1,214 +1,172 @@
-"use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.113.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 { cn } from "@ultraviolet/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useRef, useEffect, useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { Stack } from "../../Stack/index.js";
-import { useModal } from "../ModalProvider.js";
-import { modalImageContainer, modalImage, modalContent, positionModal, topModal, modal, modalBackdrop } from "../styles.css.js";
+
+//#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
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const containerRef = useRef(document.createElement("div"));
-  const dialogRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  const {
-    registerModal,
-    unregisterModal,
-    openedModals,
-    previsousOpenedModales
-  } = useModal();
-  useEffect(() => {
-    setIsVisible(true);
-  }, []);
-  useEffect(() => {
-    registerModal({ id, ref: dialogRef });
-    return () => {
-      unregisterModal(id);
-    };
-  }, [id, registerModal, unregisterModal]);
-  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(() => {
-    dialogRef.current?.focus();
-  }, []);
-  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.current?.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]
-  );
-  const handleFocusTrap = useCallback((event) => {
-    event.stopPropagation();
-    if (event.key === "Escape") {
-      event.preventDefault();
-      return;
-    }
-    const isTabPressed = event.key === "Tab";
-    if (!isTabPressed) {
-      return;
-    }
-    const focusableEls = dialogRef.current?.querySelectorAll(
-      "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])"
-    );
-    if (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();
-      }
-    }
-  }, []);
-  if (modalAbove?.ref && typeof modalAbove.ref === "object" && "current" in modalAbove.ref && currentModalHeight) {
-    top = (modalAbove?.ref?.current?.offsetHeight ?? 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
-              })
-            ),
-            "data-size": size,
-            "data-testid": dataTestId,
-            id,
-            onCancel: stopCancel,
-            onClose: stopCancel,
-            onKeyDown: handleFocusTrap,
-            onKeyUp: handleKeyUp,
-            open: true,
-            ref: dialogRef,
-            style: {
-              ...assignInlineVars({
-                [topModal]: `-${top}px`,
-                [positionModal]: `${position * 50}px`
-              }),
-              ...style
-            },
-            tabIndex: 0,
-            children: image ? /* @__PURE__ */ jsxs(Fragment, { 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
-  );
+	event.preventDefault();
+	event.stopPropagation();
 };
-export {
-  Dialog
+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) => {
+		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();
+			}
+		}
+	}, [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
+			})),
+			"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);
 };
+
+//#endregion
+export { Dialog };

package/dist/components/Modal/components/Disclosure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/Disclosure.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,eAAO,MAAM,UAAU,GAAI,oEAQxB,eAAe,sGAiCjB,CAAA"}
+{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/components/Disclosure.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,eAAO,MAAM,UAAU,4LAyCtB,CAAA"}

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

@@ -1,42 +1,44 @@
-"use client";
-import { useEffect, useMemo, isValidElement, cloneElement } from "react";
-const Disclosure = ({
-  disclosure,
-  handleOpen,
-  visible,
-  handleClose,
-  toggle,
-  id,
-  ref
-}) => {
-  useEffect(() => {
-    const element = ref.current;
-    element?.addEventListener("click", handleOpen);
-    return () => {
-      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
-  });
-};
-export {
-  Disclosure
+'use client';
+import { __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,
+			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
+	});
 };
+
+//#endregion
+export { Disclosure };

package/dist/components/Modal/index.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
 import type { ModalPlacement, ModalSize, ModalState } from './types';
 export type ModalProps = {
     id?: string;
@@ -9,6 +9,7 @@ export type ModalProps = {
     disclosure?: ReactElement | ((state: ModalState) => ReactElement);
     isClosable?: boolean;
     onClose?: () => void;
+    onOpen?: () => void;
     onBeforeClose?: () => Promise<void> | void;
     open?: boolean;
     placement?: ModalPlacement;
@@ -22,10 +23,11 @@ export type ModalProps = {
      */
     image?: string;
     style?: CSSProperties;
+    ref?: RefObject<HTMLDialogElement | null>;
 };
 /**
  * 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.
  */
-export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, image, style, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, onOpen, open, placement, preventBodyScroll, size, className, 'data-testid': dataTestId, backdropClassName, image, style, ref, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpE,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,YAAY,CAAC,CAAA;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,SAAS,CAAC,CAAA;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,KAAK,GAAI,8NAmBnB,UAAU,4CAkGZ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAK9E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpE,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,YAAY,CAAC,CAAA;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,SAAS,CAAC,CAAA;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAC1C,CAAA;AACD;;;GAGG;AACH,eAAO,MAAM,KAAK,oSA0HjB,CAAA"}