@opensite/ui 0.3.1 → 0.3.3

package/dist/registry.cjs

@@ -33,6 +33,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var pdfViewer = require('@page-speed/pdf-viewer');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -81631,6 +81632,19 @@ function ResourceDetailWhitepaperSidebar({
   patternOpacity
 }) {
   const [showFullViewer, setShowFullViewer] = React11.useState(false);
+  const [isMounted, setIsMounted] = React11.useState(false);
+  React11.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  React11.useEffect(() => {
+    if (!showFullViewer) return;
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [showFullViewer]);
   const handleOpenFullViewer = React11.useCallback(() => {
     setShowFullViewer(true);
   }, []);
@@ -81759,36 +81773,47 @@ function ResourceDetailWhitepaperSidebar({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-last md:order-0 md:col-span-4 lg:col-span-3", children: renderSidebar() }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-7 md:col-start-5 lg:col-start-6", children: renderArticle() })
         ] }),
-        showFullViewer && sidebar?.pdfUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-black/90", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleCloseFullViewer,
-                className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
-                "aria-label": "Close viewer",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            pdfViewer.PDFViewer,
+        showFullViewer && sidebar?.pdfUrl && isMounted && typeof document !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              url: sidebar.pdfUrl,
-              height: "100%",
-              config: {
-                showControls: true,
-                showThumbnails: true,
-                enableDownload: true,
-                enablePrint: true,
-                enableFullscreen: true,
-                initialZoom: "page-width"
-              }
+              className: "fixed inset-0 z-[9999] flex flex-col bg-black/90",
+              role: "dialog",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseFullViewer,
+                      className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                      "aria-label": "Close viewer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  pdfViewer.PDFViewer,
+                  {
+                    url: sidebar.pdfUrl,
+                    height: "100%",
+                    config: {
+                      showControls: true,
+                      showThumbnails: true,
+                      enableDownload: true,
+                      enablePrint: true,
+                      enableFullscreen: true,
+                      initialZoom: "page-fit"
+                    }
+                  }
+                ) })
+              ]
             }
-          ) })
-        ] })
+          ),
+          document.body
+        )
       ]
     }
   );

package/dist/registry.js

@@ -32,6 +32,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { PDFViewer } from '@page-speed/pdf-viewer';
+import { createPortal } from 'react-dom';
 
 // lib/utils.ts
 function cn(...inputs) {
@@ -81591,6 +81592,19 @@ function ResourceDetailWhitepaperSidebar({
   patternOpacity
 }) {
   const [showFullViewer, setShowFullViewer] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!showFullViewer) return;
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [showFullViewer]);
   const handleOpenFullViewer = useCallback(() => {
     setShowFullViewer(true);
   }, []);
@@ -81719,36 +81733,47 @@ function ResourceDetailWhitepaperSidebar({
           /* @__PURE__ */ jsx("div", { className: "order-last md:order-0 md:col-span-4 lg:col-span-3", children: renderSidebar() }),
           /* @__PURE__ */ jsx("div", { className: "md:col-span-7 md:col-start-5 lg:col-start-6", children: renderArticle() })
         ] }),
-        showFullViewer && sidebar?.pdfUrl && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-black/90", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleCloseFullViewer,
-                className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
-                "aria-label": "Close viewer",
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-            PDFViewer,
+        showFullViewer && sidebar?.pdfUrl && isMounted && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              url: sidebar.pdfUrl,
-              height: "100%",
-              config: {
-                showControls: true,
-                showThumbnails: true,
-                enableDownload: true,
-                enablePrint: true,
-                enableFullscreen: true,
-                initialZoom: "page-width"
-              }
+              className: "fixed inset-0 z-[9999] flex flex-col bg-black/90",
+              role: "dialog",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseFullViewer,
+                      className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                      "aria-label": "Close viewer",
+                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+                  PDFViewer,
+                  {
+                    url: sidebar.pdfUrl,
+                    height: "100%",
+                    config: {
+                      showControls: true,
+                      showThumbnails: true,
+                      enableDownload: true,
+                      enablePrint: true,
+                      enableFullscreen: true,
+                      initialZoom: "page-fit"
+                    }
+                  }
+                ) })
+              ]
             }
-          ) })
-        ] })
+          ),
+          document.body
+        )
       ]
     }
   );

package/dist/resource-detail-whitepaper-sidebar.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var React = require('react');
+var reactDom = require('react-dom');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -1086,6 +1087,19 @@ function ResourceDetailWhitepaperSidebar({
   patternOpacity
 }) {
   const [showFullViewer, setShowFullViewer] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  React.useEffect(() => {
+    if (!showFullViewer) return;
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [showFullViewer]);
   const handleOpenFullViewer = React.useCallback(() => {
     setShowFullViewer(true);
   }, []);
@@ -1214,36 +1228,47 @@ function ResourceDetailWhitepaperSidebar({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-last md:order-0 md:col-span-4 lg:col-span-3", children: renderSidebar() }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-7 md:col-start-5 lg:col-start-6", children: renderArticle() })
         ] }),
-        showFullViewer && sidebar?.pdfUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-black/90", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleCloseFullViewer,
-                className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
-                "aria-label": "Close viewer",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            pdfViewer.PDFViewer,
+        showFullViewer && sidebar?.pdfUrl && isMounted && typeof document !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              url: sidebar.pdfUrl,
-              height: "100%",
-              config: {
-                showControls: true,
-                showThumbnails: true,
-                enableDownload: true,
-                enablePrint: true,
-                enableFullscreen: true,
-                initialZoom: "page-width"
-              }
+              className: "fixed inset-0 z-[9999] flex flex-col bg-black/90",
+              role: "dialog",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseFullViewer,
+                      className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                      "aria-label": "Close viewer",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  pdfViewer.PDFViewer,
+                  {
+                    url: sidebar.pdfUrl,
+                    height: "100%",
+                    config: {
+                      showControls: true,
+                      showThumbnails: true,
+                      enableDownload: true,
+                      enablePrint: true,
+                      enableFullscreen: true,
+                      initialZoom: "page-fit"
+                    }
+                  }
+                ) })
+              ]
             }
-          ) })
-        ] })
+          ),
+          document.body
+        )
       ]
     }
   );

package/dist/resource-detail-whitepaper-sidebar.js

@@ -1,6 +1,7 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState, useCallback } from 'react';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -1065,6 +1066,19 @@ function ResourceDetailWhitepaperSidebar({
   patternOpacity
 }) {
   const [showFullViewer, setShowFullViewer] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!showFullViewer) return;
+    if (typeof document === "undefined") return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [showFullViewer]);
   const handleOpenFullViewer = useCallback(() => {
     setShowFullViewer(true);
   }, []);
@@ -1193,36 +1207,47 @@ function ResourceDetailWhitepaperSidebar({
           /* @__PURE__ */ jsx("div", { className: "order-last md:order-0 md:col-span-4 lg:col-span-3", children: renderSidebar() }),
           /* @__PURE__ */ jsx("div", { className: "md:col-span-7 md:col-start-5 lg:col-start-6", children: renderArticle() })
         ] }),
-        showFullViewer && sidebar?.pdfUrl && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-black/90", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: handleCloseFullViewer,
-                className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
-                "aria-label": "Close viewer",
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-            PDFViewer,
+        showFullViewer && sidebar?.pdfUrl && isMounted && typeof document !== "undefined" && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              url: sidebar.pdfUrl,
-              height: "100%",
-              config: {
-                showControls: true,
-                showThumbnails: true,
-                enableDownload: true,
-                enablePrint: true,
-                enableFullscreen: true,
-                initialZoom: "page-width"
-              }
+              className: "fixed inset-0 z-[9999] flex flex-col bg-black/90",
+              role: "dialog",
+              "aria-modal": "true",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-background px-6 py-4", children: [
+                  /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: typeof sidebar.resourceTitle === "string" ? sidebar.resourceTitle : "Document Viewer" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCloseFullViewer,
+                      className: "flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:bg-muted",
+                      "aria-label": "Close viewer",
+                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+                  PDFViewer,
+                  {
+                    url: sidebar.pdfUrl,
+                    height: "100%",
+                    config: {
+                      showControls: true,
+                      showThumbnails: true,
+                      enableDownload: true,
+                      enablePrint: true,
+                      enableFullscreen: true,
+                      initialZoom: "page-fit"
+                    }
+                  }
+                ) })
+              ]
             }
-          ) })
-        ] })
+          ),
+          document.body
+        )
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3304,8 +3304,8 @@
     "@opensite/hooks": "^0.1.1",
     "@page-speed/forms": "0.3.4",
     "@page-speed/img": "0.4.3",
-    "@page-speed/lightbox": "0.1.9",
-    "@page-speed/pdf-viewer": "0.1.7",
+    "@page-speed/lightbox": "0.2.0",
+    "@page-speed/pdf-viewer": "0.1.8",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",