@pdf-viewer/react 1.12.0-beta.0 → 1.12.0-beta.1

package/dist/components/page/CustomElement.js

@@ -1,4 +1,4 @@
-import { jsx as n, Fragment as c } from "react/jsx-runtime";
+import { jsx as r, Fragment as c } from "react/jsx-runtime";
 import { useRef as l, useMemo as i, useEffect as f } from "react";
 import { useElementPageContext as a } from "../../contexts/ElementPageContext.js";
 const d = ({ child: e }) => {
@@ -6,16 +6,16 @@ const d = ({ child: e }) => {
   return f(() => {
     var o;
     return (o = t.current) == null || o.appendChild(e), () => {
-      var r;
-      (r = t.current) == null || r.removeChild(e);
+      var n;
+      (n = t.current) == null || n.removeChild(e);
     };
-  }, [e]), /* @__PURE__ */ n("div", { ref: t });
+  }, [e]), /* @__PURE__ */ r("div", { ref: t });
 }, h = ({ pageNumber: e }) => {
-  const { elementList: t } = a(), o = l(null), r = i(() => {
+  const { elementList: t } = a(), o = l(null), n = i(() => {
     var m;
-    return (m = t[e]) == null ? void 0 : m.map((u, s) => u instanceof HTMLElement ? /* @__PURE__ */ n(d, { child: u }, s) : /* @__PURE__ */ n("div", { children: u }, s));
+    return (m = t[e]) == null ? void 0 : m.map((u, s) => u instanceof HTMLElement ? /* @__PURE__ */ r(d, { child: u }, s) : /* @__PURE__ */ r("div", { children: u }, s));
   }, [t, e]);
-  return r ? /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n("div", { ref: o, "data-rp": `page-${e}-customElement`, children: r.map((m) => m) }) }) : null;
+  return n ? /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r("div", { ref: o, "data-rp": `page-${e}-customElement`, children: n.map((m) => m) }) }) : null;
 };
 export {
   h as CustomElement

package/dist/contexts/ElementPageContext.js

@@ -1,76 +1,120 @@
-import { jsx as w } from "react/jsx-runtime";
-import { createContext as L, useState as P, useCallback as u, useContext as h, useRef as g, useMemo as A } from "react";
-import { LicenseType as R } from "../utils/types.js";
-import { useDimensionPagesContext as y } from "./DimensionPagesContext.js";
-import { usePagesRotateContext as S } from "./PagesRotateContext.js";
-import { useLicenseContext as T } from "./LicenseContext.js";
-import { useZoomContext as _ } from "./ZoomContext.js";
-import { ORGANIZATION_ALLOWED_FEATURES_MESSAGE as E } from "../utils/const.js";
-const d = L(void 0), U = ({ children: c }) => {
-  const [i, o] = P({}), { widths: t, heights: l } = y(), { pageRotate: m } = S(), { currentZoom: f } = _(), x = u(
-    (e, r) => {
-      o((n) => {
-        const s = { width: t[e], height: l[e] };
+import { jsx as k } from "react/jsx-runtime";
+import { createContext as z, useState as H, useCallback as p, useContext as N, useRef as U, useMemo as q } from "react";
+import { ScrollMode as g, LicenseType as B } from "../utils/types.js";
+import { useDimensionPagesContext as J } from "./DimensionPagesContext.js";
+import { usePagesRotateContext as K } from "./PagesRotateContext.js";
+import { useLicenseContext as Q } from "./LicenseContext.js";
+import { useZoomContext as X } from "./ZoomContext.js";
+import { ORGANIZATION_ALLOWED_FEATURES_MESSAGE as x } from "../utils/const.js";
+import { getScrollDistance as w } from "../utils/getScrollDistance.js";
+import { useLayoutContainer as Y } from "./LayoutContainerContext.js";
+import { useScrollModeContext as $ } from "./ScrollModeContext.js";
+import { getElementPagePosition as ee } from "../utils/getElementPositionInPage.js";
+import { useViewModeContext as te } from "./ViewModeContext.js";
+import { useVirtualScrollContext as oe } from "./VirtualScrollContext.js";
+const S = z(void 0), he = ({ children: i }) => {
+  const [l, c] = H({}), { widths: t, heights: r } = J(), { pagesRef: m } = Y(), { scrollMode: C } = $(), { pageRotate: u } = K(), { currentZoom: a } = X(), { columnCount: R } = te(), { pageScrollElementRef: I, virtualScrollableElementRef: T } = oe(), M = p(
+    (e, s, o = { behavior: "smooth" }) => {
+      var v;
+      const n = T || I;
+      if (!m || !n)
+        return;
+      const L = (v = l[e]) == null ? void 0 : v[s];
+      if (!L)
+        return;
+      let f = 0, P = 0;
+      if (C === g.VERTICAL_SCROLLING) {
+        const E = e - 1, d = R, W = E % d, j = Math.floor(E / d);
+        f = w(r, j), P = w(t, W);
+      }
+      C === g.HORIZONTAL_SCROLLING && (P = t.slice(0, e - 1).reduce((E, d) => E + d, 0));
+      const _ = {
+        height: r[e - 1],
+        width: t[e - 1]
+      }, D = u[e], { left: G, top: Z } = ee(
+        _,
+        m,
+        L,
+        D,
+        a
+      ), V = P + G, b = f + Z, F = {
+        left: Math.max(V, 0),
+        top: Math.max(b, 0)
+      };
+      n.scrollTo({
+        ...F,
+        behavior: o.behavior
+      });
+    },
+    [l, r, t, m, u, a, C]
+  ), A = p(
+    (e, s) => {
+      c((o) => {
+        const n = { width: t[e], height: r[e] };
         return {
-          ...n,
-          [e]: r(
-            n[e],
-            s,
-            m[e],
-            f * 100
+          ...o,
+          [e]: s(
+            o[e],
+            n,
+            u[e],
+            a * 100
           )
         };
       });
     },
-    [t, l, f, m]
-  ), p = u((e) => {
-    o((r) => {
-      const n = { ...r };
-      return delete n[e], n;
+    [t, r, a, u]
+  ), O = p((e) => {
+    c((s) => {
+      const o = { ...s };
+      return delete o[e], o;
     });
-  }, []), C = u((e, r) => {
-    o((n) => {
-      const s = { ...n };
-      return s[e] = s[e].filter((D, v) => v !== r), s;
+  }, []), y = p((e, s) => {
+    c((o) => {
+      const n = { ...o };
+      return n[e] = n[e].filter((L, f) => f !== s), n;
     });
   }, []);
-  return /* @__PURE__ */ w(
-    d.Provider,
+  return /* @__PURE__ */ k(
+    S.Provider,
     {
-      value: { updateElement: x, clearElements: p, removeElement: C, elementList: i },
-      children: c
+      value: { updateElement: A, clearElements: O, removeElement: y, elementList: l, scrollToElement: M },
+      children: i
     }
   );
-}, a = () => {
-}, W = () => {
-  const c = h(d), { type: i, validating: o } = T(), t = g(0), l = A(() => {
-    if (o !== !1)
+}, h = () => {
+}, Ce = () => {
+  const i = N(S), { type: l, validating: c } = Q(), t = U(0), r = q(() => {
+    if (c !== !1)
       return {
-        updateElement: a,
-        clearElements: a,
-        removeElement: a,
-        elementList: {}
+        updateElement: h,
+        clearElements: h,
+        removeElement: h,
+        elementList: {},
+        scrollToElement: h
       };
-    if (!(i !== R.Developer))
+    if (!(l !== B.Developer))
       return {
         updateElement: () => {
-          t.current === 0 && (console.error(E), t.current++);
+          t.current === 0 && (console.error(x), t.current++);
         },
         clearElements: () => {
-          t.current === 0 && (console.error(E), t.current++);
+          t.current === 0 && (console.error(x), t.current++);
         },
         removeElement: () => {
-          t.current === 0 && (console.error(E), t.current++);
+          t.current === 0 && (console.error(x), t.current++);
         },
-        elementList: {}
+        elementList: {},
+        scrollToElement: () => {
+          t.current === 0 && (console.error(x), t.current++);
+        }
       };
-  }, [i, o]);
-  if (!c)
+  }, [l, c]);
+  if (!i)
     throw new Error("useElementPageContext must be used within a ElementPageProvider");
-  return l || c;
+  return r || i;
 };
 export {
-  d as ElementPageContext,
-  U as ElementPageProvider,
-  W as useElementPageContext
+  S as ElementPageContext,
+  he as ElementPageProvider,
+  Ce as useElementPageContext
 };

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

@@ -0,0 +1,5 @@
+import { RectPosition } from './types';
+export declare const getElementPagePosition: (pageDimension: {
+    width: number;
+    height: number;
+}, pagesRef: HTMLDivElement, element: HTMLElement | JSX.Element, rotation: number, scale: number) => RectPosition;

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

@@ -665,6 +665,7 @@ export interface useElementPage {
     removeElement: (pageNumber: number, index: number) => void;
     clearElements: (pageNumber: number) => void;
     elementList: Record<number, Array<HTMLElement | JSX.Element>>;
+    scrollToElement: (page: number, index: number) => void;
 }
 export interface MatchHighlight extends MatchValue {
     keyword: string | RegExp;

package/dist/utils/getElementPositionInPage.js

@@ -0,0 +1,41 @@
+const g = (l, s, c, h, a) => {
+  let r = "center";
+  switch (h) {
+    case 90:
+      r = `${l.width / 2}px ${l.width / 2}px`;
+      break;
+    case -90:
+    case 270:
+      r = `${l.height / 2}px ${l.height / 2}px`;
+      break;
+    default:
+      r = "center";
+  }
+  const t = document.createElement("div");
+  t.id = "parent-element", t.style.width = `${l.width}px`, t.style.height = `${l.height}px`, t.style.setProperty("--scale-factor", a.toString()), t.style.setProperty("--rotation", h.toString()), t.style.setProperty("--transform-origin", r), t.style.left = "-99999px", t.style.visibility = "hidden", t.style.position = "absolute";
+  const i = document.createElement("div");
+  i.style.position = "relative", i.style.width = "100%", i.style.height = "100%", t.appendChild(i);
+  let e;
+  if (c instanceof HTMLElement)
+    e = c.cloneNode(!0), i.appendChild(e);
+  else {
+    const o = c.props;
+    e = document.createElement("div"), o.style && Object.assign(e.style, o.style), o.className && (e.className = o.className), i.appendChild(e);
+  }
+  s.appendChild(t);
+  const d = t.getBoundingClientRect(), n = e.getBoundingClientRect();
+  s.removeChild(t);
+  const p = {
+    top: s.clientHeight / 2,
+    left: s.clientWidth / 2
+  };
+  return {
+    left: n.left - d.left - p.left + n.width / 2,
+    top: n.top - d.top - p.top + n.height / 2,
+    width: n.width,
+    height: n.height
+  };
+};
+export {
+  g as getElementPagePosition
+};

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("2025-11-05T02:48:52.912Z"), d = "Please visit https://www.react-pdf.dev/manage-license/ to generate a new license key.", s = {
+const b = /* @__PURE__ */ new Date("2025-11-07T03:48:56.419Z"), 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/package.json

@@ -2,7 +2,7 @@
   "name": "@pdf-viewer/react",
   "private": false,
   "description": "A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.",
-  "version": "1.12.0-beta.0",
+  "version": "1.12.0-beta.1",
   "keywords": [
     "react-pdf",
     "react-pdf-viewer",