npm - framepexls-ui-lib - Versions diffs - 0.1.30 → 0.1.32 - Mend

framepexls-ui-lib 0.1.30 → 0.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/Checkbox.d.mts CHANGED Viewed

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Dialog.js CHANGED Viewed

@@ -41,6 +41,7 @@ __export(Dialog_exports, {
 module.exports = __toCommonJS(Dialog_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_framer_motion = require("framer-motion");
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_Button = __toESM(require("./Button"));
@@ -55,6 +56,26 @@ const sizeToMaxW = {
   "5xl": "max-w-5xl",
   full: "max-w-[min(96vw,1200px)]"
 };
+const zManager = /* @__PURE__ */ (() => {
+  const stack = [];
+  const BASE = 1e3;
+  const STEP = 10;
+  return {
+    acquire() {
+      const z = BASE + stack.length * STEP;
+      stack.push(z);
+      return z;
+    },
+    release(z) {
+      const i = stack.indexOf(z);
+      if (i !== -1) stack.splice(i, 1);
+    },
+    isTop(z) {
+      if (z == null) return false;
+      return stack.length > 0 && stack[stack.length - 1] === z;
+    }
+  };
+})();
 function useLockBodyScroll(open) {
   (0, import_react.useEffect)(() => {
     if (!open) return;
@@ -79,15 +100,16 @@ function useLockBodyScroll(open) {
     };
   }, [open]);
 }
-function useEscToClose(open, onClose, disabled) {
+function useEscToClose(open, onClose, disabled, onlyTop) {
   (0, import_react.useEffect)(() => {
     if (!open || disabled) return;
+    if (onlyTop === false) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose, disabled]);
+  }, [open, onClose, disabled, onlyTop]);
 }
 function cx(...a) {
   return a.filter(Boolean).join(" ");
@@ -110,8 +132,21 @@ function DialogBase({
   const containerRef = (0, import_react.useRef)(null);
   const closeBtnRef = (0, import_react.useRef)(null);
   const lastFocusedRef = (0, import_react.useRef)(null);
+  const [zIndexBase, setZIndexBase] = (0, import_react.useState)(null);
   useLockBodyScroll(open);
-  useEscToClose(open, onClose, disableEscClose);
+  useEscToClose(open, onClose, disableEscClose, zManager.isTop(zIndexBase));
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      const z = zManager.acquire();
+      setZIndexBase(z);
+      return () => {
+        zManager.release(z);
+        setZIndexBase(null);
+      };
+    } else {
+      setZIndexBase(null);
+    }
+  }, [open]);
   (0, import_react.useEffect)(() => {
     var _a, _b, _c;
     if (open) {
@@ -127,59 +162,64 @@ function DialogBase({
     if (!dismissibleBackdrop) return;
     if (e.target === e.currentTarget) onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_framer_motion.motion.div,
-      {
-        className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_framer_motion.motion.div,
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? "dialog-title" : void 0,
-        "aria-describedby": description ? "dialog-desc" : void 0,
-        className: "fixed inset-0 z-[101] grid place-items-center p-4",
-        initial: { opacity: 0, scale: 0.98, y: 8 },
-        animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 0.98, y: 8 },
-        onMouseDown: handleBackdropMouseDown,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              ref: containerRef,
-              className: cx(
-                "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
-                "dark:border-white/10 dark:bg-[#0b0a0a]",
-                "flex max-h-[88vh] flex-col",
-                sizeToMaxW[size],
-                className
-              ),
-              onMouseDown: (e) => e.stopPropagation(),
-              children: children != null ? children : null
-            }
-          ),
-          showClose && !children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_ActionIconButton.default,
-            {
-              title: "Cerrar",
-              size: "lg",
-              onClick: onClose,
-              ref: closeBtnRef,
-              className: "shadow-sm",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
-            }
-          ) })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.div,
+        {
+          className: "fixed inset-0 bg-black/45 backdrop-blur-sm",
+          style: { zIndex: zIndexBase != null ? zIndexBase : 1e3 },
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_framer_motion.motion.div,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? "dialog-title" : void 0,
+          "aria-describedby": description ? "dialog-desc" : void 0,
+          className: "fixed inset-0 grid place-items-center p-4",
+          style: { zIndex: (zIndexBase != null ? zIndexBase : 1e3) + 1 },
+          initial: { opacity: 0, scale: 0.98, y: 8 },
+          animate: { opacity: 1, scale: 1, y: 0 },
+          exit: { opacity: 0, scale: 0.98, y: 8 },
+          onMouseDown: handleBackdropMouseDown,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ref: containerRef,
+                className: cx(
+                  "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
+                  "dark:border-white/10 dark:bg-[#0b0a0a]",
+                  "flex max-h-[88vh] flex-col",
+                  sizeToMaxW[size],
+                  className
+                ),
+                onMouseDown: (e) => e.stopPropagation(),
+                children: children != null ? children : null
+              }
+            ),
+            showClose && !children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ActionIconButton.default,
+              {
+                title: "Cerrar",
+                size: "lg",
+                onClick: onClose,
+                ref: closeBtnRef,
+                className: "shadow-sm",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+              }
+            ) })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  ) });
 }
 function DialogHeader({
   title,

package/dist/Dialog.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import ActionIconButton from "./ActionIconButton";
 import Button from "./Button";
@@ -15,6 +16,26 @@ const sizeToMaxW = {
   "5xl": "max-w-5xl",
   full: "max-w-[min(96vw,1200px)]"
 };
+const zManager = /* @__PURE__ */ (() => {
+  const stack = [];
+  const BASE = 1e3;
+  const STEP = 10;
+  return {
+    acquire() {
+      const z = BASE + stack.length * STEP;
+      stack.push(z);
+      return z;
+    },
+    release(z) {
+      const i = stack.indexOf(z);
+      if (i !== -1) stack.splice(i, 1);
+    },
+    isTop(z) {
+      if (z == null) return false;
+      return stack.length > 0 && stack[stack.length - 1] === z;
+    }
+  };
+})();
 function useLockBodyScroll(open) {
   useEffect(() => {
     if (!open) return;
@@ -39,15 +60,16 @@ function useLockBodyScroll(open) {
     };
   }, [open]);
 }
-function useEscToClose(open, onClose, disabled) {
+function useEscToClose(open, onClose, disabled, onlyTop) {
   useEffect(() => {
     if (!open || disabled) return;
+    if (onlyTop === false) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose, disabled]);
+  }, [open, onClose, disabled, onlyTop]);
 }
 function cx(...a) {
   return a.filter(Boolean).join(" ");
@@ -70,8 +92,21 @@ function DialogBase({
   const containerRef = useRef(null);
   const closeBtnRef = useRef(null);
   const lastFocusedRef = useRef(null);
+  const [zIndexBase, setZIndexBase] = useState(null);
   useLockBodyScroll(open);
-  useEscToClose(open, onClose, disableEscClose);
+  useEscToClose(open, onClose, disableEscClose, zManager.isTop(zIndexBase));
+  useEffect(() => {
+    if (open) {
+      const z = zManager.acquire();
+      setZIndexBase(z);
+      return () => {
+        zManager.release(z);
+        setZIndexBase(null);
+      };
+    } else {
+      setZIndexBase(null);
+    }
+  }, [open]);
   useEffect(() => {
     var _a, _b, _c;
     if (open) {
@@ -87,59 +122,64 @@ function DialogBase({
     if (!dismissibleBackdrop) return;
     if (e.target === e.currentTarget) onClose();
   };
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? "dialog-title" : void 0,
-        "aria-describedby": description ? "dialog-desc" : void 0,
-        className: "fixed inset-0 z-[101] grid place-items-center p-4",
-        initial: { opacity: 0, scale: 0.98, y: 8 },
-        animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 0.98, y: 8 },
-        onMouseDown: handleBackdropMouseDown,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: containerRef,
-              className: cx(
-                "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
-                "dark:border-white/10 dark:bg-[#0b0a0a]",
-                "flex max-h-[88vh] flex-col",
-                sizeToMaxW[size],
-                className
-              ),
-              onMouseDown: (e) => e.stopPropagation(),
-              children: children != null ? children : null
-            }
-          ),
-          showClose && !children && /* @__PURE__ */ jsx("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ jsx(
-            ActionIconButton,
-            {
-              title: "Cerrar",
-              size: "lg",
-              onClick: onClose,
-              ref: closeBtnRef,
-              className: "shadow-sm",
-              children: /* @__PURE__ */ jsx(CloseIcon, {})
-            }
-          ) })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && typeof document !== "undefined" && createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "fixed inset-0 bg-black/45 backdrop-blur-sm",
+          style: { zIndex: zIndexBase != null ? zIndexBase : 1e3 },
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? "dialog-title" : void 0,
+          "aria-describedby": description ? "dialog-desc" : void 0,
+          className: "fixed inset-0 grid place-items-center p-4",
+          style: { zIndex: (zIndexBase != null ? zIndexBase : 1e3) + 1 },
+          initial: { opacity: 0, scale: 0.98, y: 8 },
+          animate: { opacity: 1, scale: 1, y: 0 },
+          exit: { opacity: 0, scale: 0.98, y: 8 },
+          onMouseDown: handleBackdropMouseDown,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: containerRef,
+                className: cx(
+                  "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
+                  "dark:border-white/10 dark:bg-[#0b0a0a]",
+                  "flex max-h-[88vh] flex-col",
+                  sizeToMaxW[size],
+                  className
+                ),
+                onMouseDown: (e) => e.stopPropagation(),
+                children: children != null ? children : null
+              }
+            ),
+            showClose && !children && /* @__PURE__ */ jsx("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ jsx(
+              ActionIconButton,
+              {
+                title: "Cerrar",
+                size: "lg",
+                onClick: onClose,
+                ref: closeBtnRef,
+                className: "shadow-sm",
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            ) })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  ) });
 }
 function DialogHeader({
   title,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",