@react-pdf-kit/viewer 2.1.0-rc.1 → 2.2.0-beta.0

package/dist/components/RPConfig.js

@@ -1,17 +1,25 @@
 import { jsx as r } from "react/jsx-runtime";
-import { RPTheme as s } from "./RPTheme.js";
-import { ConfigContextProvider as d } from "../contexts/ConfigContext.js";
+import { RPTheme as d } from "./RPTheme.js";
+import { ConfigContextProvider as l } from "../contexts/ConfigContext.js";
 import { useLoadWorker as f } from "../utils/hooks/useLoadWorker.js";
-import { LicenseProvider as l } from "../contexts/LicenseContext.js";
+import { LicenseProvider as a } from "../contexts/LicenseContext.js";
 import "../contexts/ThemeContext.js";
 import "react";
 import "pdfjs-dist";
 import "../utils/hooks/useLicense.js";
 import "../utils/appConsole.js";
-const w = (o) => {
-  const { children: e, customVariables: i, customDarkVariables: t, workerUrl: m, licenseKey: n, ...c } = o, { workerUrlAdded: p } = f(m);
-  return /* @__PURE__ */ r(l, { licenseKey: n, children: /* @__PURE__ */ r(d, { workerUrlAdded: p, ...c, children: /* @__PURE__ */ r(s, { customDarkVariables: t, customVariables: i, children: e }) }) });
+const v = (o) => {
+  const {
+    children: e,
+    customVariables: i,
+    customDarkVariables: m,
+    workerUrl: t,
+    wasmUrl: n,
+    licenseKey: s,
+    ...c
+  } = o, { workerUrlAdded: p } = f(t);
+  return /* @__PURE__ */ r(a, { licenseKey: s, children: /* @__PURE__ */ r(l, { workerUrlAdded: p, wasmUrl: n, ...c, children: /* @__PURE__ */ r(d, { customDarkVariables: m, customVariables: i, children: e }) }) });
 };
 export {
-  w as RPConfig
+  v as RPConfig
 };

package/dist/components/RPDropFileZone.js

@@ -1,13 +1,12 @@
-import { jsxs as p, Fragment as i, jsx as o } from "react/jsx-runtime";
-import { useCallback as u } from "react";
-import { c as D } from "../clsx-0c6e471a.js";
-import { useDropFileZoneContext as g } from "../contexts/DropFileZoneContext.js";
-import { LightPdfIcon as h } from "./icons/LightPdfIcon.js";
-import { DarkPdfIcon as C } from "./icons/DarkPdfIcon.js";
-import { useDarkModeContext as x } from "../contexts/DarkModeContext.js";
-import { useToolbarComponentContext as F } from "../contexts/ToolbarComponentContext.js";
-import { useLocalizationContext as v } from "../contexts/LocalizationContext.js";
-import { useToolComponentContext as z } from "../contexts/ToolComponentContext.js";
+import { jsxs as s, Fragment as t, jsx as r } from "react/jsx-runtime";
+import { useCallback as F } from "react";
+import { c as v } from "../clsx-0c6e471a.js";
+import { useDropFileZoneContext as Z } from "../contexts/DropFileZoneContext.js";
+import { LightPdfIcon as x } from "./icons/LightPdfIcon.js";
+import { DarkPdfIcon as z } from "./icons/DarkPdfIcon.js";
+import { useDarkModeContext as C } from "../contexts/DarkModeContext.js";
+import { useLocalizationContext as _ } from "../contexts/LocalizationContext.js";
+import { useDropFileZone as k } from "../utils/hooks/useDropFileZone.js";
 import "../contexts/RPDocumentContext.js";
 import "../utils/hooks/useLoadPdf.js";
 import "pdfjs-dist";
@@ -20,34 +19,42 @@ import "../utils/appConsole.js";
 import "../utils/hooks/usePdfProperties.js";
 import "../utils/convertPdfDate.js";
 import "../utils/formatFileSize.js";
+import "../contexts/ToolbarComponentContext.js";
+import "../contexts/ToolComponentContext.js";
 import "../utils/hooks/useDarkMode.js";
 import "../utils/hooks/useLocalization.js";
-const m = {
+import "../contexts/LayoutDropFileZoneContext.js";
+const l = {
   "rp-drop-zone": "_rp-drop-zone_1sc50_1",
   "rp-drop-zone-transparent": "_rp-drop-zone-transparent_1sc50_15"
-}, Z = {}, U = () => {
-  const { dragging: s, handleDragLeave: a, handleDrop: l } = g(), { darkMode: n } = x(), { dropFileZone: r = !0 } = F(), { dropFileZone: e = !0 } = z(), { localeMessages: t } = v(), d = u((f) => {
-    f.preventDefault();
+}, L = {}, $ = () => {
+  const { dragging: d, handleDragLeave: c, handleDrop: f } = Z(), { darkMode: p } = C(), { localeMessages: e } = _(), { DropFileZoneLayout: i, DropFileZoneTool: m, DropFileZoneToolbar: a } = k(), u = [i, m, a].includes(
+    !1
+  ), D = F((o) => {
+    o.preventDefault();
   }, []);
-  if (!r || !e || !s)
+  if (!d || u)
     return null;
-  const c = () => typeof r == "function" ? /* @__PURE__ */ o(r, {}) : typeof e == "function" ? /* @__PURE__ */ o(e, {}) : /* @__PURE__ */ p(i, { children: [
-    /* @__PURE__ */ o("div", { children: n ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(h, {}) }),
-    /* @__PURE__ */ o("p", { children: t == null ? void 0 : t.dragDropFileMessage })
-  ] });
-  return /* @__PURE__ */ p(i, { children: [
-    /* @__PURE__ */ o("div", { className: D(m["rp-drop-zone"], n ? Z["rp-dark-mode"] : ""), children: /* @__PURE__ */ o(c, {}) }),
-    /* @__PURE__ */ o(
+  const n = (o) => o ? typeof o == "function" ? /* @__PURE__ */ r("slot", {}) : typeof o != "boolean" ? /* @__PURE__ */ r(t, { children: o }) : null : null, h = /* @__PURE__ */ s(t, { children: [
+    /* @__PURE__ */ r("div", { children: p ? /* @__PURE__ */ r(z, {}) : /* @__PURE__ */ r(x, {}) }),
+    /* @__PURE__ */ r("p", { children: e == null ? void 0 : e.dragDropFileMessage })
+  ] }), g = () => (
+    // Priority: RPLayout > RPHorizontalBar\RPDefaultLayout (slots)
+    n(i) ?? n(m) ?? n(a) ?? h
+  );
+  return /* @__PURE__ */ s(t, { children: [
+    /* @__PURE__ */ r("div", { className: v(l["rp-drop-zone"], p ? L["rp-dark-mode"] : ""), children: /* @__PURE__ */ r(g, {}) }),
+    /* @__PURE__ */ r(
       "div",
       {
-        className: m["rp-drop-zone-transparent"],
-        onDragOver: d,
-        onDragLeave: a,
-        onDrop: l
+        className: l["rp-drop-zone-transparent"],
+        onDragOver: D,
+        onDragLeave: c,
+        onDrop: f
       }
     )
   ] });
 };
 export {
-  U as RPDropFileZone
+  $ as RPDropFileZone
 };

package/dist/components/layout/RPDefaultLayout.js

@@ -146,13 +146,15 @@ import "../../utils/hooks/useInfiniteScroll.js";
 import "../../contexts/DropFileZoneContext.js";
 import "../icons/LightPdfIcon.js";
 import "../icons/DarkPdfIcon.js";
+import "../../utils/hooks/useDropFileZone.js";
+import "../../contexts/LayoutDropFileZoneContext.js";
 import "../../utils/hooks/useLoadPdf.js";
 import "../../contexts/ConfigContext.js";
 import "../../utils/hooks/usePdfProperties.js";
 import "../../utils/convertPdfDate.js";
 import "../../utils/formatFileSize.js";
 import "../../contexts/ThemeContext.js";
-const kt = L((n, a) => {
+const jt = L((n, a) => {
   const {
     children: l,
     slots: s,
@@ -234,5 +236,5 @@ const kt = L((n, a) => {
   ] }) }) }) }) });
 });
 export {
-  kt as RPDefaultLayout
+  jt as RPDefaultLayout
 };

package/dist/components/layout/RPLayout.js

@@ -1,15 +1,16 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { useEffect as u } from "react";
-import { useLayoutContainer as y } from "../../contexts/LayoutContainerContext.js";
+import { useEffect as y } from "react";
+import { useLayoutContainer as L } from "../../contexts/LayoutContainerContext.js";
 import { Container as C } from "./Container.js";
-import { ViewportProvider as L } from "../../contexts/ViewportContext.js";
-import { ToolbarLayout as g } from "./toolbar/ToolbarLayout.js";
-import { WrapperLayout as b } from "./WrapperLayout.js";
-import { useDocumentContext as x } from "../../contexts/RPDocumentContext.js";
+import { ViewportProvider as g } from "../../contexts/ViewportContext.js";
+import { ToolbarLayout as b } from "./toolbar/ToolbarLayout.js";
+import { WrapperLayout as x } from "./WrapperLayout.js";
+import { useDocumentContext as v } from "../../contexts/RPDocumentContext.js";
 import { RPDropFileZone as k } from "../RPDropFileZone.js";
+import { LayoutDropFileZoneProvider as P } from "../../contexts/LayoutDropFileZoneContext.js";
 import { c as j } from "../../RPLayout.module-b4b23e29.js";
-import { useLoaderContext as v } from "../../contexts/LoaderContext.js";
-import { LayoutContainer as w } from "./LayoutContainer.js";
+import { useLoaderContext as w } from "../../contexts/LoaderContext.js";
+import { LayoutContainer as D } from "./LayoutContainer.js";
 import { SkipLink as p } from "./SkipLink.js";
 import "../../clsx-0c6e471a.js";
 import "./toolbar/ToolbarDefault.js";
@@ -156,8 +157,9 @@ import "../../utils/convertPdfDate.js";
 import "../../utils/formatFileSize.js";
 import "../icons/LightPdfIcon.js";
 import "../icons/DarkPdfIcon.js";
+import "../../utils/hooks/useDropFileZone.js";
 import "../../contexts/ThemeContext.js";
-const vr = (e) => {
+const Fr = (e) => {
   const {
     children: n,
     style: a,
@@ -166,16 +168,17 @@ const vr = (e) => {
     onLoaded: t,
     cleanupOnLoaded: r,
     onLayoutWidthChange: d,
-    toolbar: f
-  } = e, { setContainer: c } = y(), { loading: h } = x(), { LoaderImageComponent: i } = v();
-  return u(() => (t && t(), () => {
+    toolbar: f,
+    dropFileZone: c = !0
+  } = e, { setContainer: u } = L(), { loading: h } = v(), { LoaderImageComponent: i } = w();
+  return y(() => (t && t(), () => {
     r && r();
   }), [t, r]), // TODO: deprecated in v2.0.0, remove later ("LayoutContainer") ~
-  /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o(L, { mobileWidth: s, onLayoutWidthChange: d, children: /* @__PURE__ */ m(C, { getContainerRef: c, style: a, className: l, children: [
+  /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(P, { value: c, children: /* @__PURE__ */ o(g, { mobileWidth: s, onLayoutWidthChange: d, children: /* @__PURE__ */ m(C, { getContainerRef: u, style: a, className: l, children: [
     /* @__PURE__ */ o(p, { href: "#rp-menu", label: "Skip to Menu" }),
     /* @__PURE__ */ o(p, { href: "#rp-main-content", label: "Skip to Main Content" }),
-    /* @__PURE__ */ m(b, { children: [
-      /* @__PURE__ */ o(g, { toolbar: f, children: n }),
+    /* @__PURE__ */ m(x, { children: [
+      /* @__PURE__ */ o(b, { toolbar: f, children: n }),
       /* @__PURE__ */ o(k, {})
     ] }),
     h ? /* @__PURE__ */ o(
@@ -206,8 +209,8 @@ const vr = (e) => {
         )
       }
     ) : null
-  ] }) }) });
+  ] }) }) }) });
 };
 export {
-  vr as RPLayout
+  Fr as RPLayout
 };

package/dist/components/layout/WrapperLayout.js

@@ -1,7 +1,5 @@
-import { jsx as r, Fragment as e } from "react/jsx-runtime";
-import { useDropFileZoneContext as n } from "../../contexts/DropFileZoneContext.js";
-import { useToolbarComponentContext as i } from "../../contexts/ToolbarComponentContext.js";
-import { useToolComponentContext as a } from "../../contexts/ToolComponentContext.js";
+import { jsx as p } from "react/jsx-runtime";
+import { useDropFileZoneContext as t } from "../../contexts/DropFileZoneContext.js";
 import "react";
 import "../../contexts/RPDocumentContext.js";
 import "../../utils/hooks/useLoadPdf.js";
@@ -15,12 +13,14 @@ import "../../utils/appConsole.js";
 import "../../utils/hooks/usePdfProperties.js";
 import "../../utils/convertPdfDate.js";
 import "../../utils/formatFileSize.js";
-const s = {
+import "../../contexts/ToolbarComponentContext.js";
+import "../../contexts/ToolComponentContext.js";
+const m = {
   "rp-wrapper-layout": "_rp-wrapper-layout_2cghq_1"
-}, j = ({ children: o }) => {
-  const { handleDragEnter: m } = n(), { dropFileZone: t } = i(), { dropFileZone: p } = a();
-  return typeof t == "boolean" && !t ? /* @__PURE__ */ r(e, { children: o }) : typeof p == "boolean" && !p ? /* @__PURE__ */ r(e, { children: o }) : /* @__PURE__ */ r("div", { className: s["rp-wrapper-layout"], onDragEnter: m, children: o });
+}, E = ({ children: r }) => {
+  const { handleDragEnter: o } = t();
+  return /* @__PURE__ */ p("div", { className: m["rp-wrapper-layout"], onDragEnter: o, children: r });
 };
 export {
-  j as WrapperLayout
+  E as WrapperLayout
 };

package/dist/components/layout/toolbar/tools/DualPageWithCoverTool.js

@@ -69,6 +69,7 @@ import "../../../ui/LoadingIndicator.js";
 import "../../../../RPSplitter-f6acf13b.js";
 import "../../WrapperLayout.js";
 import "../../../RPDropFileZone.js";
+import "../../../../contexts/LayoutDropFileZoneContext.js";
 import "../../../../RPLayout.module-b4b23e29.js";
 import "../../LayoutContainer.js";
 import "../../SkipLink.js";
@@ -186,7 +187,8 @@ import "../../sidebar/Thumbnail.js";
 import "../../../../utils/hooks/useInfiniteScroll.js";
 import "../../../icons/LightPdfIcon.js";
 import "../../../icons/DarkPdfIcon.js";
-const C = ({ children: t, className: i, localeMessages: o }) => /* @__PURE__ */ r(m, { className: i, content: o == null ? void 0 : o.dualPageWithCoverTooltip, children: t }), Er = ({ icon: t }) => {
+import "../../../../utils/hooks/useDropFileZone.js";
+const C = ({ children: t, className: i, localeMessages: o }) => /* @__PURE__ */ r(m, { className: i, content: o == null ? void 0 : o.dualPageWithCoverTooltip, children: t }), Gr = ({ icon: t }) => {
   const { setDualPageWithCover: i } = e(), { localeMessages: o } = u();
   return /* @__PURE__ */ r(C, { localeMessages: o, children: /* @__PURE__ */ r(
     p,
@@ -198,5 +200,5 @@ const C = ({ children: t, className: i, localeMessages: o }) => /* @__PURE__ */
   ) });
 };
 export {
-  Er as DualPageWithCoverTool
+  Gr as DualPageWithCoverTool
 };

package/dist/components/layout/toolbar/tools/FirstPageTool.js

@@ -69,6 +69,7 @@ import "../../../ui/LoadingIndicator.js";
 import "../../../../RPSplitter-f6acf13b.js";
 import "../../WrapperLayout.js";
 import "../../../RPDropFileZone.js";
+import "../../../../contexts/LayoutDropFileZoneContext.js";
 import "../../../../RPLayout.module-b4b23e29.js";
 import "../../LayoutContainer.js";
 import "../../SkipLink.js";
@@ -186,12 +187,13 @@ import "../../sidebar/Thumbnail.js";
 import "../../../../utils/hooks/useInfiniteScroll.js";
 import "../../../icons/LightPdfIcon.js";
 import "../../../icons/DarkPdfIcon.js";
-const l = ({ children: t, className: r, localeMessages: o }) => /* @__PURE__ */ i(n, { className: r, content: o == null ? void 0 : o.firstPageTooltip, children: t }), Hr = ({ icon: t }) => {
+import "../../../../utils/hooks/useDropFileZone.js";
+const l = ({ children: t, className: r, localeMessages: o }) => /* @__PURE__ */ i(n, { className: r, content: o == null ? void 0 : o.firstPageTooltip, children: t }), Kr = ({ icon: t }) => {
   const { goToPage: r } = f(), { localeMessages: o } = c(), m = p(() => {
     r(1);
   }, [r]);
   return /* @__PURE__ */ i(l, { localeMessages: o, children: /* @__PURE__ */ i(a, { onClick: m, "aria-label": o == null ? void 0 : o.firstPageTooltip, children: t || /* @__PURE__ */ i(T, { className: P["rp-go-to-Top"] }) }) });
 };
 export {
-  Hr as FirstPageTool
+  Kr as FirstPageTool
 };

package/dist/components/layout/toolbar/tools/LastPageTool.js

@@ -69,6 +69,7 @@ import "../../../ui/LoadingIndicator.js";
 import "../../../../RPSplitter-f6acf13b.js";
 import "../../WrapperLayout.js";
 import "../../../RPDropFileZone.js";
+import "../../../../contexts/LayoutDropFileZoneContext.js";
 import "../../../../RPLayout.module-b4b23e29.js";
 import "../../LayoutContainer.js";
 import "../../SkipLink.js";
@@ -186,12 +187,13 @@ import "../../sidebar/Thumbnail.js";
 import "../../../../utils/hooks/useInfiniteScroll.js";
 import "../../../icons/LightPdfIcon.js";
 import "../../../icons/DarkPdfIcon.js";
-const c = ({ children: t, className: r, localeMessages: o }) => /* @__PURE__ */ m(a, { className: r, content: o == null ? void 0 : o.lastPageTooltip, children: t }), Jr = ({ icon: t }) => {
+import "../../../../utils/hooks/useDropFileZone.js";
+const c = ({ children: t, className: r, localeMessages: o }) => /* @__PURE__ */ m(a, { className: r, content: o == null ? void 0 : o.lastPageTooltip, children: t }), Nr = ({ icon: t }) => {
   const { goToPage: r, totalPages: o } = T(), { localeMessages: i } = f(), p = n(() => {
     r(o);
   }, [r, o]);
   return /* @__PURE__ */ m(c, { localeMessages: i, children: /* @__PURE__ */ m(P, { onClick: p, "aria-label": i == null ? void 0 : i.lastPageTooltip, children: t || /* @__PURE__ */ m(l, {}) }) });
 };
 export {
-  Jr as LastPageTool
+  Nr as LastPageTool
 };

package/dist/contexts/ConfigContext.js

@@ -1,13 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
 import { createContext as i, useContext as s } from "react";
 const o = i({
-  workerUrlAdded: !1
-}), f = () => s(o), x = (t) => {
+  workerUrlAdded: !1,
+  wasmUrl: void 0
+}), d = () => s(o), f = (t) => {
   const { children: e, ...r } = t;
   return /* @__PURE__ */ n(o.Provider, { value: r, children: e });
 };
 export {
   o as ConfigContext,
-  x as ConfigContextProvider,
-  f as useConfigContext
+  f as ConfigContextProvider,
+  d as useConfigContext
 };

package/dist/contexts/LayoutDropFileZoneContext.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as n, useContext as u } from "react";
+const i = !0, o = n(i), p = () => u(o), x = ({
+  value: t,
+  children: e
+}) => /* @__PURE__ */ r(o.Provider, { value: t, children: e });
+export {
+  o as LayoutDropFileZoneContext,
+  x as LayoutDropFileZoneProvider,
+  p as useLayoutDropFileZoneContext
+};

package/dist/main.js

@@ -1,54 +1,54 @@
-import { RPProvider as dt } from "./components/RPProvider.js";
-import { RPPages as Dt } from "./components/RPPages.js";
-import { RPConfig as Ft } from "./components/RPConfig.js";
-import { RPDefaultLayout as Mt } from "./components/layout/RPDefaultLayout.js";
-import { RPLayout as vt } from "./components/layout/RPLayout.js";
-import { RPTheme as Bt } from "./components/RPTheme.js";
-import { default as Ht } from "./components/ui/RPTooltip.js";
-import { UIButton as bt } from "./components/ui/Button.js";
-import { useDarkModeContext as zt } from "./contexts/DarkModeContext.js";
-import { u as Ut } from "./PaginationContext-9217cab4.js";
-import { useDocumentContext as Nt } from "./contexts/RPDocumentContext.js";
-import { useRotationContext as jt } from "./contexts/RotationContext.js";
-import { useViewModeContext as At } from "./contexts/ViewModeContext.js";
-import { useDropFileZoneContext as Jt } from "./contexts/DropFileZoneContext.js";
-import { useFileDownload as Qt } from "./utils/hooks/useFileDownload.js";
-import { useOpenFileContext as Yt } from "./contexts/FileInputContext.js";
-import { usePrintContext as $t } from "./contexts/PrintContext.js";
-import { useZoomContext as rm } from "./contexts/ZoomContext.js";
-import { useSearchContext as mm } from "./contexts/SearchContext.js";
-import { useHighlightContext as im } from "./contexts/HighlightContext.js";
-import { useFullScreenContext as lm } from "./contexts/FullScreenContext.js";
-import { usePageRotateContext as fm } from "./utils/hooks/usePageRotateContext.js";
-import { useElementPageContext as nm } from "./contexts/ElementPageContext.js";
-import { SearchTool as Tm } from "./components/layout/toolbar/SearchTool.js";
-import { ThemeSwitcherTool as sm } from "./components/layout/toolbar/tools/ThemeSwitcherTool.js";
-import { ThumbnailTool as gm } from "./components/layout/toolbar/tools/ThumbnailTool.js";
-import { FileUploadTool as Rm } from "./components/layout/toolbar/tools/FileUploadTool.js";
-import { FileDownloadTool as dm } from "./components/layout/toolbar/tools/FileDownloadTool.js";
-import { PrintTool as Dm } from "./components/layout/toolbar/tools/PrintTool.js";
-import { FullScreenTool as Fm } from "./components/layout/toolbar/tools/FullScreenTool.js";
-import { PreviousPageTool as Mm } from "./components/layout/toolbar/tools/PreviousPageTool.js";
-import { NextPageTool as vm } from "./components/layout/toolbar/tools/NextPageTool.js";
-import { InputPageTool as Bm } from "./components/layout/toolbar/tools/InputPageTool.js";
-import { ZoomInTool as Hm } from "./components/layout/toolbar/tools/ZoomInTool.js";
-import { ZoomOutTool as bm } from "./components/layout/toolbar/tools/ZoomOutTool.js";
-import { ZoomLevelTool as zm } from "./components/layout/toolbar/tools/ZoomLevelTool.js";
-import { DocumentPropertiesTool as Um } from "./components/layout/toolbar/tools/DocumentPropertiesTool.js";
-import { RotateClockwiseTool as Nm } from "./components/layout/toolbar/tools/RotateClockwiseTool.js";
-import { RotateCounterclockwiseTool as jm } from "./components/layout/toolbar/tools/RotateCounterclockwiseTool.js";
-import { RPHorizontalBar as Am } from "./components/layout/toolbar/tools/defaults/RPHorizontalBar.js";
-import { RPVerticalBar as Jm } from "./components/layout/toolbar/tools/defaults/RPVerticalBar.js";
-import { SelectionModeSwitcherTool as Qm } from "./components/layout/toolbar/tools/SelectionModeSwitcherTool.js";
-import { SinglePageTool as Ym } from "./components/layout/toolbar/tools/SinglePageTool.js";
-import { DualPageTool as $m } from "./components/layout/toolbar/tools/DualPageTool.js";
-import { DualPageWithCoverTool as rp } from "./components/layout/toolbar/tools/DualPageWithCoverTool.js";
-import { PageScrollingTool as mp } from "./components/layout/toolbar/tools/PageScrollingTool.js";
-import { VerticalScrollingTool as ip } from "./components/layout/toolbar/tools/VerticalScrollingTool.js";
-import { HorizontalScrollingTool as lp } from "./components/layout/toolbar/tools/HorizontalScrollingTool.js";
-import { FirstPageTool as fp } from "./components/layout/toolbar/tools/FirstPageTool.js";
-import { LastPageTool as np } from "./components/layout/toolbar/tools/LastPageTool.js";
-import { Locales as Tp, ScrollMode as Pp, SelectionMode as sp, ThemeVariables as cp, ViewMode as gp, ZoomLevel as Cp } from "./utils/types.js";
+import { RPProvider as Dt } from "./components/RPProvider.js";
+import { RPPages as Ft } from "./components/RPPages.js";
+import { RPConfig as Mt } from "./components/RPConfig.js";
+import { RPDefaultLayout as vt } from "./components/layout/RPDefaultLayout.js";
+import { RPLayout as Bt } from "./components/layout/RPLayout.js";
+import { RPTheme as Ht } from "./components/RPTheme.js";
+import { default as bt } from "./components/ui/RPTooltip.js";
+import { UIButton as zt } from "./components/ui/Button.js";
+import { useDarkModeContext as Ut } from "./contexts/DarkModeContext.js";
+import { u as Nt } from "./PaginationContext-9217cab4.js";
+import { useDocumentContext as jt } from "./contexts/RPDocumentContext.js";
+import { useRotationContext as At } from "./contexts/RotationContext.js";
+import { useViewModeContext as Jt } from "./contexts/ViewModeContext.js";
+import { useDropFileZoneContext as Qt } from "./contexts/DropFileZoneContext.js";
+import { useFileDownload as Yt } from "./utils/hooks/useFileDownload.js";
+import { useOpenFileContext as $t } from "./contexts/FileInputContext.js";
+import { usePrintContext as rm } from "./contexts/PrintContext.js";
+import { useZoomContext as mm } from "./contexts/ZoomContext.js";
+import { useSearchContext as im } from "./contexts/SearchContext.js";
+import { useHighlightContext as lm } from "./contexts/HighlightContext.js";
+import { useFullScreenContext as fm } from "./contexts/FullScreenContext.js";
+import { usePageRotateContext as nm } from "./utils/hooks/usePageRotateContext.js";
+import { useElementPageContext as Tm } from "./contexts/ElementPageContext.js";
+import { SearchTool as sm } from "./components/layout/toolbar/SearchTool.js";
+import { ThemeSwitcherTool as gm } from "./components/layout/toolbar/tools/ThemeSwitcherTool.js";
+import { ThumbnailTool as Rm } from "./components/layout/toolbar/tools/ThumbnailTool.js";
+import { FileUploadTool as dm } from "./components/layout/toolbar/tools/FileUploadTool.js";
+import { FileDownloadTool as Dm } from "./components/layout/toolbar/tools/FileDownloadTool.js";
+import { PrintTool as Fm } from "./components/layout/toolbar/tools/PrintTool.js";
+import { FullScreenTool as Mm } from "./components/layout/toolbar/tools/FullScreenTool.js";
+import { PreviousPageTool as vm } from "./components/layout/toolbar/tools/PreviousPageTool.js";
+import { NextPageTool as Bm } from "./components/layout/toolbar/tools/NextPageTool.js";
+import { InputPageTool as Hm } from "./components/layout/toolbar/tools/InputPageTool.js";
+import { ZoomInTool as bm } from "./components/layout/toolbar/tools/ZoomInTool.js";
+import { ZoomOutTool as zm } from "./components/layout/toolbar/tools/ZoomOutTool.js";
+import { ZoomLevelTool as Um } from "./components/layout/toolbar/tools/ZoomLevelTool.js";
+import { DocumentPropertiesTool as Nm } from "./components/layout/toolbar/tools/DocumentPropertiesTool.js";
+import { RotateClockwiseTool as jm } from "./components/layout/toolbar/tools/RotateClockwiseTool.js";
+import { RotateCounterclockwiseTool as Am } from "./components/layout/toolbar/tools/RotateCounterclockwiseTool.js";
+import { RPHorizontalBar as Jm } from "./components/layout/toolbar/tools/defaults/RPHorizontalBar.js";
+import { RPVerticalBar as Qm } from "./components/layout/toolbar/tools/defaults/RPVerticalBar.js";
+import { SelectionModeSwitcherTool as Ym } from "./components/layout/toolbar/tools/SelectionModeSwitcherTool.js";
+import { SinglePageTool as $m } from "./components/layout/toolbar/tools/SinglePageTool.js";
+import { DualPageTool as rp } from "./components/layout/toolbar/tools/DualPageTool.js";
+import { DualPageWithCoverTool as mp } from "./components/layout/toolbar/tools/DualPageWithCoverTool.js";
+import { PageScrollingTool as ip } from "./components/layout/toolbar/tools/PageScrollingTool.js";
+import { VerticalScrollingTool as lp } from "./components/layout/toolbar/tools/VerticalScrollingTool.js";
+import { HorizontalScrollingTool as fp } from "./components/layout/toolbar/tools/HorizontalScrollingTool.js";
+import { FirstPageTool as np } from "./components/layout/toolbar/tools/FirstPageTool.js";
+import { LastPageTool as Tp } from "./components/layout/toolbar/tools/LastPageTool.js";
+import { Locales as sp, ScrollMode as cp, SelectionMode as gp, ThemeVariables as Cp, ViewMode as Rp, ZoomLevel as Sp } from "./utils/types.js";
 import "react/jsx-runtime";
 import "react";
 import "./contexts/DocumentPasswordContext.js";
@@ -202,6 +202,8 @@ import "./components/layout/WrapperLayout.js";
 import "./components/RPDropFileZone.js";
 import "./components/icons/LightPdfIcon.js";
 import "./components/icons/DarkPdfIcon.js";
+import "./utils/hooks/useDropFileZone.js";
+import "./contexts/LayoutDropFileZoneContext.js";
 import "./components/layout/SkipLink.js";
 import "./components/layout/toolbar/ToolbarLayout.js";
 import "./components/layout/toolbar/ToolbarDefault.js";
@@ -230,60 +232,60 @@ import "./components/layout/toolbar/SearchCloseButton.js";
 import "./components/icons/ChevronDownIcon.js";
 import "./components/layout/toolbar/ThumbnailTool.js";
 export {
-  Um as DocumentPropertiesTool,
-  $m as DualPageTool,
-  rp as DualPageWithCoverTool,
-  dm as FileDownloadTool,
-  Rm as FileUploadTool,
-  fp as FirstPageTool,
-  Fm as FullScreenTool,
-  lp as HorizontalScrollingTool,
-  Bm as InputPageTool,
-  np as LastPageTool,
-  Tp as Locales,
-  vm as NextPageTool,
-  mp as PageScrollingTool,
-  Mm as PreviousPageTool,
-  Dm as PrintTool,
-  bt as RPButton,
-  Ft as RPConfig,
-  Mt as RPDefaultLayout,
-  Am as RPHorizontalBar,
-  vt as RPLayout,
-  Dt as RPPages,
-  dt as RPProvider,
-  Bt as RPTheme,
-  Ht as RPTooltip,
-  Jm as RPVerticalBar,
-  Nm as RotateClockwiseTool,
-  jm as RotateCounterclockwiseTool,
-  Pp as ScrollMode,
-  Tm as SearchTool,
-  sp as SelectionMode,
-  Qm as SelectionModeSwitcherTool,
-  Ym as SinglePageTool,
-  sm as ThemeSwitcherTool,
-  cp as ThemeVariables,
-  gm as ThumbnailTool,
-  ip as VerticalScrollingTool,
-  gp as ViewMode,
-  Hm as ZoomInTool,
-  Cp as ZoomLevel,
-  zm as ZoomLevelTool,
-  bm as ZoomOutTool,
-  zt as useDarkModeContext,
-  Nt as useDocumentContext,
-  Jt as useDropFileZoneContext,
-  nm as useElementPageContext,
-  Qt as useFileDownload,
-  lm as useFullScreenContext,
-  im as useHighlightContext,
-  Yt as useOpenFileContext,
-  fm as usePageRotateContext,
-  Ut as usePaginationContext,
-  $t as usePrintContext,
-  jt as useRotationContext,
-  mm as useSearchContext,
-  At as useViewModeContext,
-  rm as useZoomContext
+  Nm as DocumentPropertiesTool,
+  rp as DualPageTool,
+  mp as DualPageWithCoverTool,
+  Dm as FileDownloadTool,
+  dm as FileUploadTool,
+  np as FirstPageTool,
+  Mm as FullScreenTool,
+  fp as HorizontalScrollingTool,
+  Hm as InputPageTool,
+  Tp as LastPageTool,
+  sp as Locales,
+  Bm as NextPageTool,
+  ip as PageScrollingTool,
+  vm as PreviousPageTool,
+  Fm as PrintTool,
+  zt as RPButton,
+  Mt as RPConfig,
+  vt as RPDefaultLayout,
+  Jm as RPHorizontalBar,
+  Bt as RPLayout,
+  Ft as RPPages,
+  Dt as RPProvider,
+  Ht as RPTheme,
+  bt as RPTooltip,
+  Qm as RPVerticalBar,
+  jm as RotateClockwiseTool,
+  Am as RotateCounterclockwiseTool,
+  cp as ScrollMode,
+  sm as SearchTool,
+  gp as SelectionMode,
+  Ym as SelectionModeSwitcherTool,
+  $m as SinglePageTool,
+  gm as ThemeSwitcherTool,
+  Cp as ThemeVariables,
+  Rm as ThumbnailTool,
+  lp as VerticalScrollingTool,
+  Rp as ViewMode,
+  bm as ZoomInTool,
+  Sp as ZoomLevel,
+  Um as ZoomLevelTool,
+  zm as ZoomOutTool,
+  Ut as useDarkModeContext,
+  jt as useDocumentContext,
+  Qt as useDropFileZoneContext,
+  Tm as useElementPageContext,
+  Yt as useFileDownload,
+  fm as useFullScreenContext,
+  lm as useHighlightContext,
+  $t as useOpenFileContext,
+  nm as usePageRotateContext,
+  Nt as usePaginationContext,
+  rm as usePrintContext,
+  At as useRotationContext,
+  im as useSearchContext,
+  Jt as useViewModeContext,
+  mm as useZoomContext
 };

package/dist/types/contexts/LayoutDropFileZoneContext.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface LayoutDropFileZoneProviderProps extends PropsWithChildren {
+    value: LayoutDropFileZoneValue;
+}
+type LayoutDropFileZoneValue = boolean | React.ReactNode | React.ComponentType;
+export declare const LayoutDropFileZoneContext: import('react').Context<LayoutDropFileZoneValue>;
+export declare const useLayoutDropFileZoneContext: () => LayoutDropFileZoneValue;
+export declare const LayoutDropFileZoneProvider: FC<LayoutDropFileZoneProviderProps>;
+export {};

package/dist/types/utils/hooks/useDropFileZone.d.ts

@@ -0,0 +1,5 @@
+export declare const useDropFileZone: () => {
+    DropFileZoneLayout: import('react').ReactNode | import('react').ComponentType<{}>;
+    DropFileZoneTool: import('react').ReactNode | import('react').ComponentType<{}>;
+    DropFileZoneToolbar: import('react').ReactNode | import('react').ComponentType<{}>;
+};

package/dist/types/utils/types.d.ts

@@ -363,6 +363,7 @@ export interface PdfProperties {
 }
 export interface ConfigContextType {
     workerUrlAdded: boolean;
+    wasmUrl?: string;
 }
 export declare enum ThemeVariables {
     FONT_FAMILY = "--rp-font-family",
@@ -521,6 +522,7 @@ export interface RPDefaultLayoutProps extends PropsWithChildren, ViewportProps {
     cleanupOnLoaded?: () => void;
 }
 export interface RPLayoutProps extends PropsWithChildren, ViewportProps {
+    dropFileZone?: boolean | React.ReactNode | React.ComponentType;
     toolbar?: boolean | Partial<ToolbarProps>;
     style?: React.CSSProperties;
     className?: string;

package/dist/utils/hooks/useDropFileZone.js

@@ -0,0 +1,12 @@
+import { useLayoutDropFileZoneContext as r } from "../../contexts/LayoutDropFileZoneContext.js";
+import { useToolComponentContext as n } from "../../contexts/ToolComponentContext.js";
+import { useToolbarComponentContext as p } from "../../contexts/ToolbarComponentContext.js";
+import "react/jsx-runtime";
+import "react";
+const F = () => {
+  const o = r(), { dropFileZone: e } = n(), { dropFileZone: t } = p();
+  return { DropFileZoneLayout: o, DropFileZoneTool: e, DropFileZoneToolbar: t };
+};
+export {
+  F as useDropFileZone
+};

package/dist/utils/hooks/useLicense.js

@@ -1,6 +1,6 @@
 import { useState as E, useCallback as h, useEffect as A } from "react";
 import { appConsole as l } from "../appConsole.js";
-const b = /* @__PURE__ */ new Date("2026-03-11T09:43:09.331Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
+const b = /* @__PURE__ */ new Date("2026-03-12T07:27:29.050Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
   invalidLicense: `You are currently using without a valid license. ${d}`,
   mismatchedDomain: `Your license key is not valid for the current domain / IP. ${d}`,
   expired: `Your license key has expired. ${d}`,

package/dist/utils/hooks/useLoadPdf.js

@@ -1,42 +1,43 @@
-import { useState as d, useRef as A, useEffect as k } from "react";
-import * as I from "pdfjs-dist";
-import { ErrorType as F } from "../types.js";
-import { getThumbnailViewport as j } from "../getThumbnailViewport.js";
-import { useConfigContext as z } from "../../contexts/ConfigContext.js";
-import { useDocumentPasswordContext as _ } from "../../contexts/DocumentPasswordContext.js";
+import { useState as a, useRef as F, useEffect as v } from "react";
+import * as U from "pdfjs-dist";
+import { ErrorType as j } from "../types.js";
+import { getThumbnailViewport as z } from "../getThumbnailViewport.js";
+import { useConfigContext as _ } from "../../contexts/ConfigContext.js";
+import { useDocumentPasswordContext as B } from "../../contexts/DocumentPasswordContext.js";
 import "../../de_DE-a553b162.js";
 import "react/jsx-runtime";
 import "../appConsole.js";
-const Y = (m, s, h = {}) => {
-  const [n, q] = d(), { workerUrlAdded: v } = z(), [D, S] = d(/* @__PURE__ */ new Map()), a = A(), [f, g] = d(0), [P, T] = d(!1), [N, O] = d(), { password: u, passwordError: U, setPasswordError: c, passwordRequired: p, setPasswordRequired: w } = _(), { onLoadError: i, onLoaded: E, onLoadProgress: b, disableAutoFetch: x, disableStream: C, rangeChunkSize: V } = h;
-  return k(() => {
-    b && b(f);
-  }, [f, b]), k(() => {
-    if (!v || !m)
+const Z = (m, s, h = {}) => {
+  const [n, q] = a(), { workerUrlAdded: S, wasmUrl: f } = _(), [D, T] = a(/* @__PURE__ */ new Map()), d = F(), [g, P] = a(0), [c, x] = a(!1), [N, O] = a(), { password: u, passwordError: A, setPasswordError: p, passwordRequired: w, setPasswordRequired: E } = B(), { onLoadError: i, onLoaded: b, onLoadProgress: R, disableAutoFetch: C, disableStream: V, rangeChunkSize: I } = h;
+  return v(() => {
+    R && R(g);
+  }, [g, R]), v(() => {
+    if (!S || !m)
       return;
-    g(0), a.current = Date.now();
-    const r = a.current, R = {
+    P(0), d.current = Date.now();
+    const r = d.current, y = {
       url: m,
       cMapPacked: (s == null ? void 0 : s.isCompressed) ?? !0,
       ...(s == null ? void 0 : s.url) && { cMapUrl: s.url },
       ...u && { password: u },
-      ...x !== void 0 && { disableAutoFetch: x },
-      ...C !== void 0 && { disableStream: C },
-      ...V !== void 0 && { rangeChunkSize: V },
-      verbosity: I.VerbosityLevel.ERRORS
+      ...C !== void 0 && { disableAutoFetch: C },
+      ...V !== void 0 && { disableStream: V },
+      ...I !== void 0 && { rangeChunkSize: I },
+      ...f && { wasmUrl: f },
+      verbosity: U.VerbosityLevel.ERRORS
     };
     try {
-      const e = I.getDocument(R);
+      const e = U.getDocument(y);
       e.onProgress = (o) => {
-        if (r === a.current) {
-          const { loaded: y, total: l } = o, L = l ? Math.min(100, Math.round(y / l * 100)) : 0;
-          g(L);
+        if (r === d.current) {
+          const { loaded: L, total: l } = o, k = l ? Math.min(100, Math.round(L / l * 100)) : 0;
+          P(k);
         }
-      }, T(!0);
-      const t = e.promise.then((o) => (r === a.current && (q(o), g(100)), E && E(o), w(!1), c(""), o)).catch((o) => {
-        o instanceof Error && o.name === "PasswordException" ? (w(!0), c(o.message || "Password required")) : o instanceof Error && o.name === "InvalidPDFException" && u ? (w(!0), c("Incorrect password")) : i && i(o);
+      }, x(!0);
+      const t = e.promise.then((o) => (r === d.current && (q(o), P(100)), b && b(o), E(!1), p(""), o)).catch((o) => {
+        o instanceof Error && o.name === "PasswordException" ? (E(!0), p(o.message || "Password required")) : o instanceof Error && o.name === "InvalidPDFException" && u ? (E(!0), p("Incorrect password")) : i && i(o);
       }).finally(() => {
-        T(!1);
+        x(!1);
       });
       return () => {
         t.finally(() => {
@@ -44,42 +45,42 @@ const Y = (m, s, h = {}) => {
         });
       };
     } catch (e) {
-      O(F.NOT_SUPPORTED), i && i(e);
+      O(j.NOT_SUPPORTED), i && i(e);
     }
-  }, [m, v, u, i, E]), k(() => {
-    if (p)
+  }, [m, S, f, u, i, b]), v(() => {
+    if (w)
       return;
     const r = /* @__PURE__ */ new Map();
-    if (!n || P) {
-      S(r);
+    if (!n || c) {
+      T(r);
       return;
     }
-    const R = n.numPages, e = [];
-    for (let t = 1; t <= R; t++) {
+    const y = n.numPages, e = [];
+    for (let t = 1; t <= y; t++) {
       const o = n.getPage(t);
       e.push(o);
     }
     Promise.all(e).then((t) => {
       t.map((o) => {
-        const { thumbnailViewport: y, scale: l } = j(o), L = o.getViewport();
+        const { thumbnailViewport: L, scale: l } = z(o), k = o.getViewport();
         r.set(o.pageNumber, {
           page: o,
-          thumbnailViewport: y,
+          thumbnailViewport: L,
           thumbnailScale: l,
-          defaultRotation: L.rotation
+          defaultRotation: k.rotation
         });
-      }), S(r);
+      }), T(r);
     });
-  }, [n, P, p]), {
+  }, [n, c, w]), {
     pdf: n,
     pages: D,
-    loading: P,
+    loading: c,
     error: N,
-    loadingProgress: f,
-    passwordRequired: p,
-    passwordError: U
+    loadingProgress: g,
+    passwordRequired: w,
+    passwordError: A
   };
 };
 export {
-  Y as useLoadPdf
+  Z as useLoadPdf
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-pdf-kit/viewer",
-  "version": "2.1.0-rc.1",
+  "version": "2.2.0-beta.0",
   "private": false,
   "description": "A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.",
   "keywords": [