@noirmd/previewer 2.0.3 → 2.0.4

package/dist/react.js

@@ -12614,6 +12614,7 @@ var NRpreviewer_default = NRpreviewer;
 
 // react/Guide.tsx
 import { useEffect as useEffect4, useMemo, useRef as useRef4, useState } from "react";
+import { createPortal } from "react-dom";
 
 // guide/index.ts
 var guideData = [
@@ -12932,68 +12933,71 @@ var Guide = ({
   }, [open, onClose]);
   if (!open) return null;
   const toggleCategory = (cat) => setCollapsed((prev) => ({ ...prev, [cat]: !prev[cat] }));
-  return /* @__PURE__ */ jsxs("div", { className: "nr-guide", role: "dialog", "aria-modal": "true", "aria-label": "Gu\xEDa de sintaxis", children: [
-    /* @__PURE__ */ jsx4("div", { className: "nr-guide__overlay", onClick: onClose }),
-    /* @__PURE__ */ jsxs("div", { className: "nr-guide__panel", children: [
-      /* @__PURE__ */ jsxs("header", { className: "nr-guide__head", children: [
-        /* @__PURE__ */ jsx4("span", { className: "material-icons-round", children: "menu_book" }),
-        /* @__PURE__ */ jsx4("h2", { children: "Gu\xEDa de sintaxis" }),
-        search && /* @__PURE__ */ jsx4(
-          "input",
-          {
-            className: "nr-guide__search",
-            type: "search",
-            placeholder: "Buscar directiva\u2026",
-            value: query,
-            onChange: (e) => setQuery(e.target.value)
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            className: "nr-guide__close",
-            onClick: onClose,
-            "aria-label": "Cerrar gu\xEDa",
-            children: "\xD7"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "nr-guide__body", children: [
-        /* @__PURE__ */ jsxs("nav", { className: "nr-guide__nav", children: [
-          filtered.map(([cat, entries]) => /* @__PURE__ */ jsxs("div", { className: "nr-guide__cat", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: "nr-guide__cat-head",
-                onClick: () => toggleCategory(cat),
-                children: [
-                  /* @__PURE__ */ jsx4("span", { className: "material-icons-round nr-guide__cat-chevron", children: collapsed[cat] ? "chevron_right" : "expand_more" }),
-                  cat
-                ]
-              }
-            ),
-            !collapsed[cat] && /* @__PURE__ */ jsx4("ul", { className: "nr-guide__items", children: entries.map((e) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: `nr-guide__item${selectedId === e.id ? " nr-guide__item--active" : ""}`,
-                onClick: () => setSelectedId(e.id),
-                children: [
-                  e.icon && /* @__PURE__ */ jsx4("span", { className: "material-icons-round nr-guide__item-icon", children: e.icon }),
-                  e.title
-                ]
-              }
-            ) }, e.id)) })
-          ] }, cat)),
-          filtered.length === 0 && /* @__PURE__ */ jsxs("div", { className: "nr-guide__empty", children: [
-            "Sin resultados para \xAB",
-            query,
-            "\xBB."
-          ] })
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "nr-guide", role: "dialog", "aria-modal": "true", "aria-label": "Gu\xEDa de sintaxis", children: [
+      /* @__PURE__ */ jsx4("div", { className: "nr-guide__overlay", onClick: onClose }),
+      /* @__PURE__ */ jsxs("div", { className: "nr-guide__panel", children: [
+        /* @__PURE__ */ jsxs("header", { className: "nr-guide__head", children: [
+          /* @__PURE__ */ jsx4("span", { className: "material-icons-round", children: "menu_book" }),
+          /* @__PURE__ */ jsx4("h2", { children: "Gu\xEDa de sintaxis" }),
+          search && /* @__PURE__ */ jsx4(
+            "input",
+            {
+              className: "nr-guide__search",
+              type: "search",
+              placeholder: "Buscar directiva\u2026",
+              value: query,
+              onChange: (e) => setQuery(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              className: "nr-guide__close",
+              onClick: onClose,
+              "aria-label": "Cerrar gu\xEDa",
+              children: "\xD7"
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx4("div", { className: "nr-guide__content", ref: contentRef, children: selected ? /* @__PURE__ */ jsx4(CustomMarkdownRenderer_default, { content: selected.md }, selected.id) : /* @__PURE__ */ jsx4("div", { className: "nr-guide__empty", children: "Selecciona una directiva de la lista." }) })
+        /* @__PURE__ */ jsxs("div", { className: "nr-guide__body", children: [
+          /* @__PURE__ */ jsxs("nav", { className: "nr-guide__nav", children: [
+            filtered.map(([cat, entries]) => /* @__PURE__ */ jsxs("div", { className: "nr-guide__cat", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "nr-guide__cat-head",
+                  onClick: () => toggleCategory(cat),
+                  children: [
+                    /* @__PURE__ */ jsx4("span", { className: "material-icons-round nr-guide__cat-chevron", children: collapsed[cat] ? "chevron_right" : "expand_more" }),
+                    cat
+                  ]
+                }
+              ),
+              !collapsed[cat] && /* @__PURE__ */ jsx4("ul", { className: "nr-guide__items", children: entries.map((e) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: `nr-guide__item${selectedId === e.id ? " nr-guide__item--active" : ""}`,
+                  onClick: () => setSelectedId(e.id),
+                  children: [
+                    e.icon && /* @__PURE__ */ jsx4("span", { className: "material-icons-round nr-guide__item-icon", children: e.icon }),
+                    e.title
+                  ]
+                }
+              ) }, e.id)) })
+            ] }, cat)),
+            filtered.length === 0 && /* @__PURE__ */ jsxs("div", { className: "nr-guide__empty", children: [
+              "Sin resultados para \xAB",
+              query,
+              "\xBB."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "nr-guide__content", ref: contentRef, children: selected ? /* @__PURE__ */ jsx4(CustomMarkdownRenderer_default, { content: selected.md }, selected.id) : /* @__PURE__ */ jsx4("div", { className: "nr-guide__empty", children: "Selecciona una directiva de la lista." }) })
+        ] })
       ] })
-    ] })
-  ] });
+    ] }),
+    document.body
+  );
 };
 var Guide_default = Guide;