@react-pdf-kit/viewer 0.0.0-experimental.0 → 0.0.0-experimental.2

package/dist/utils/hooks/usePageRotateContext.js

@@ -6,7 +6,8 @@ import { ORGANIZATION_ALLOWED_FEATURES_MESSAGE as R } from "../const.js";
 import "react/jsx-runtime";
 import "../../contexts/RPDocumentContext.js";
 import "./useLoadPdf.js";
-import "pdfjs-dist";
+import "@pdf-viewer/pdfium";
+import "@pdf-viewer/pdfium/compat";
 import "../getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
 import "../../contexts/DocumentPasswordContext.js";
@@ -19,8 +20,8 @@ import "../../contexts/RotationContext.js";
 import "../../contexts/InitialStateContext.js";
 import "../../contexts/EventCallbackContext.js";
 import "./useLicense.js";
-const U = () => {
-  const { setSinglePageRotate: r } = c(), { type: i, validating: n } = u(), m = a(() => i !== f.Developer, [i]), p = l(
+const W = () => {
+  const { setSinglePageRotate: r } = c(), { type: i, validating: m } = u(), n = a(() => i !== f.Developer, [i]), p = l(
     (s, t) => {
       r((o) => {
         const e = typeof t == "function" ? t(o[s] || 0) : t;
@@ -32,11 +33,11 @@ const U = () => {
     },
     [r]
   );
-  return { rotate: a(() => n !== !1 ? () => {
-  } : m ? p : () => {
+  return { rotate: a(() => m !== !1 ? () => {
+  } : n ? p : () => {
     console.error(R);
-  }, [n, m, p]) };
+  }, [m, n, p]) };
 };
 export {
-  U as usePageRotateContext
+  W as usePageRotateContext
 };

package/dist/utils/hooks/usePaginate.js

@@ -1,6 +1,6 @@
 import "react";
 import "../types.js";
-import { b as I } from "../../PaginationContext-9217cab4.js";
+import { b as J } from "../../PaginationContext-9217cab4.js";
 import "../../contexts/ViewModeContext.js";
 import "../../contexts/ScrollModeContext.js";
 import "./useDebounce.js";
@@ -10,7 +10,8 @@ import "../../de_DE-a553b162.js";
 import "react/jsx-runtime";
 import "../../contexts/RPDocumentContext.js";
 import "./useLoadPdf.js";
-import "pdfjs-dist";
+import "@pdf-viewer/pdfium";
+import "@pdf-viewer/pdfium/compat";
 import "../getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
 import "../../contexts/DocumentPasswordContext.js";
@@ -33,5 +34,5 @@ import "../getZoomLevel.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/PagesRotateContext.js";
 export {
-  I as usePaginate
+  J as usePaginate
 };

package/dist/utils/hooks/usePinch.js

@@ -1,7 +1,6 @@
-import { useState as Z, useRef as f, useEffect as i, useCallback as u } from "react";
-import { useZoomContext as G } from "../../contexts/ZoomContext.js";
-import { useSmoothScaleContext as N } from "../../contexts/SmoothScaleContext.js";
-import { useAccumulateFactor as D } from "./useAccumulateFactor.js";
+import { useState as E, useRef as T, useCallback as c, useEffect as i } from "react";
+import { useDebounce as g } from "./useDebounce.js";
+import { useZoomContext as A } from "../../contexts/ZoomContext.js";
 import "react/jsx-runtime";
 import "../types.js";
 import "../../de_DE-a553b162.js";
@@ -9,7 +8,8 @@ import "../appConsole.js";
 import "../../contexts/InitialStateContext.js";
 import "../../contexts/RPDocumentContext.js";
 import "./useLoadPdf.js";
-import "pdfjs-dist";
+import "@pdf-viewer/pdfium";
+import "@pdf-viewer/pdfium/compat";
 import "../getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
 import "../../contexts/DocumentPasswordContext.js";
@@ -23,93 +23,47 @@ import "../../contexts/ViewModeContext.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/GlobalCurrentPage.js";
 import "../../contexts/EventCallbackContext.js";
-import "./useDebounce.js";
-const O = 35, z = 0.25, B = 10, Ee = (n) => {
-  const { currentZoom: v, setZoomLevel: d } = G(), { zoomOriginRef: h } = N(), [s, k] = Z(!1), a = f(v), E = f(!1), l = f(null), m = f(!1), { accumulate: M, reset: A } = D(), { accumulate: C } = D();
-  i(() => {
-    a.current = v;
-  }, [v]);
-  const p = u(
-    (e) => {
-      const t = a.current, o = Math.max(z, Math.min(B, t * e)), r = Math.round(o * 100);
-      d(r);
-    },
-    [d]
-  ), S = u(
-    (e) => {
-      const t = a.current, o = e ? 3 : -3, r = Math.round(t * 100 + o);
-      d(Math.max(25, Math.min(1e3, r)));
-    },
-    [d]
-  );
-  i(() => {
-    const e = (o) => {
-      o.key === "Control" && (E.current = !0);
-    }, t = (o) => {
-      o.key === "Control" && (E.current = !1);
-    };
-    return window.addEventListener("keydown", e), window.addEventListener("keyup", t), () => {
-      window.removeEventListener("keydown", e), window.removeEventListener("keyup", t);
-    };
-  }, []);
-  const w = u(
+const _ = (o) => {
+  const { currentZoom: L, setZoomLevel: w } = A(), [D, m] = E(0), d = g(D, 100), [s, b] = E(!1), r = T(null), u = c((e) => {
+    m(e ? (t) => t + 3 : (t) => t - 3);
+  }, []), a = c(
     (e) => {
-      if (!e.ctrlKey && !e.metaKey)
+      if (!e.ctrlKey)
         return;
       e.preventDefault();
-      const t = { x: e.clientX, y: e.clientY };
-      h.current = t;
-      const o = Math.exp(-e.deltaY / 100);
-      if (e.ctrlKey && !E.current && e.deltaMode === WheelEvent.DOM_DELTA_PIXEL && e.deltaX === 0 && Math.abs(o - 1) < 0.05) {
-        const c = C(a.current, o);
-        c !== 1 && c !== 0 && p(c);
-      } else {
-        const c = e.deltaY < 0;
-        S(c);
-      }
+      const t = e.deltaY < 0;
+      u(t);
     },
-    [h, C, p, S]
-  ), L = u(
+    [u]
+  );
+  i(() => {
+    if (d) {
+      const e = Math.round(L * 100 + d);
+      m(0), w(e > 25 ? e : 25);
+    }
+  }, [d]);
+  const v = (e, t) => {
+    const n = e.clientX - t.clientX, l = e.clientY - t.clientY;
+    return Math.sqrt(n * n + l * l);
+  }, f = c(
     (e) => {
       if (!s || e.touches.length !== 2)
         return;
-      let [t, o] = Array.from(e.touches);
-      t.identifier > o.identifier && ([t, o] = [o, t]), l.current = {
-        touch0X: t.screenX,
-        touch0Y: t.screenY,
-        touch1X: o.screenX,
-        touch1Y: o.screenY
-      }, m.current = !1, e.preventDefault();
+      const t = v(e.touches[0], e.touches[1]);
+      r.current = t, e.preventDefault();
     },
     [s]
-  ), y = u(() => {
-    l.current = null, m.current = !1, A();
-  }, [A]), X = u(
+  ), h = c(() => {
+    r.current = null;
+  }, []), p = c(
     (e) => {
-      if (!s || e.touches.length !== 2 || !l.current)
-        return;
-      let [t, o] = Array.from(e.touches);
-      t.identifier > o.identifier && ([t, o] = [o, t]);
-      const r = l.current, c = r.touch1X - r.touch0X, I = r.touch1Y - r.touch0Y, T = Math.hypot(c, I) || 1, F = o.screenX - t.screenX, P = o.screenY - t.screenY, x = Math.hypot(F, P) || 1, R = O / (window.devicePixelRatio || 1);
-      if (!m.current && Math.abs(T - x) <= R)
-        return;
-      if (l.current = {
-        touch0X: t.screenX,
-        touch0Y: t.screenY,
-        touch1X: o.screenX,
-        touch1Y: o.screenY
-      }, !m.current) {
-        m.current = !0;
+      if (!s || e.touches.length !== 2 || r.current === null)
         return;
-      }
-      e.preventDefault(), e.stopPropagation();
-      const _ = (t.clientX + o.clientX) / 2, b = (t.clientY + o.clientY) / 2;
-      h.current = { x: _, y: b };
-      const K = x / T, Y = M(a.current, K);
-      Y !== 1 && Y !== 0 && p(Y);
+      const t = v(e.touches[0], e.touches[1]), n = t - r.current, l = Math.abs(n) > 5, S = n > 0;
+      l && (u(S), r.current = t, e.preventDefault());
     },
-    [s, h, M, p]
-  ), g = () => {
+    [u, s]
+  ), y = () => {
     document.activeElement instanceof HTMLElement && document.activeElement.blur();
   };
   i(() => {
@@ -120,28 +74,28 @@ const O = 35, z = 0.25, B = 10, Ee = (n) => {
     document.body.style.touchAction = "";
   }, [s]), i(() => {
     const e = () => {
-      const t = document.activeElement, o = !!(t != null && t.closest('[data-rp="container"]'));
-      k(o);
+      const t = document.activeElement, n = !!(t != null && t.closest('[data-rp="container"]'));
+      b(n);
     };
     return window.addEventListener("focusin", e), window.addEventListener("focusout", e), e(), () => {
       window.removeEventListener("focusin", e), window.removeEventListener("focusout", e);
     };
   }, []), i(() => {
-    if (!n)
+    if (!o)
       return;
     const e = (t) => {
-      n.contains(t.target) || g();
+      o.contains(t.target) || y();
     };
     return document.addEventListener("scroll", e), () => {
       document.removeEventListener("scroll", e);
     };
-  }, [n]), i(() => {
-    if (n)
-      return n.addEventListener("wheel", w, { passive: !1 }), n.addEventListener("touchstart", L, { passive: !1 }), n.addEventListener("touchmove", X, { passive: !1 }), n.addEventListener("touchend", y, { passive: !1 }), () => {
-        n.removeEventListener("wheel", w), n.removeEventListener("touchstart", L), n.removeEventListener("touchmove", X), n.removeEventListener("touchend", y);
+  }, [o]), i(() => {
+    if (o)
+      return o.addEventListener("wheel", a, { passive: !1 }), o.addEventListener("touchstart", f, { passive: !1 }), o.addEventListener("touchmove", p, { passive: !1 }), o.addEventListener("touchend", h, { passive: !1 }), () => {
+        o.removeEventListener("wheel", a), o.removeEventListener("touchstart", f), o.removeEventListener("touchmove", p), o.removeEventListener("touchend", h);
       };
-  }, [n, w, L, X, y]);
+  }, [o, a, f, p, h]);
 };
 export {
-  Ee as usePinch
+  _ as usePinch
 };

package/dist/utils/hooks/usePresentPage.js

@@ -10,7 +10,8 @@ import "react/jsx-runtime";
 import "../appConsole.js";
 import "../../contexts/RPDocumentContext.js";
 import "./useLoadPdf.js";
-import "pdfjs-dist";
+import "@pdf-viewer/pdfium";
+import "@pdf-viewer/pdfium/compat";
 import "../getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
 import "../../contexts/DocumentPasswordContext.js";
@@ -32,7 +33,7 @@ import "../../contexts/VirtualScrollContext.js";
 import "../../contexts/VirtualGridContext.js";
 import "../smoothScrollTo.js";
 import "../getScrollDistance.js";
-const Wt = (f, Y, n, W) => {
+const bt = (f, Y, n, W) => {
   const P = x(), { contentRef: E } = N(), { heights: h, widths: l } = v(), { setFocusedPage: b } = _(), [S, R] = C([]), { targetScrollPage: L } = G(), i = q(S, 0, 500), I = D(() => {
     const c = W === M.DUAL_PAGE_WITH_COVER, { rowsHeight: r, columnsWidth: o } = A({ heights: h, widths: l }, f, c);
     return h.map((m, t) => {
@@ -86,5 +87,5 @@ const Wt = (f, Y, n, W) => {
   }, [n, g]);
 };
 export {
-  Wt as usePresentPage
+  bt as usePresentPage
 };

package/dist/utils/hooks/usePrint.js

@@ -1,8 +1,9 @@
-import { useState as g, useRef as N, useEffect as R, useCallback as P } from "react";
-import { useDocumentContext as O } from "../../contexts/RPDocumentContext.js";
-import { PixelsPerInch as X, AnnotationMode as q, RenderingCancelledException as B } from "pdfjs-dist";
+import { useState as g, useRef as k, useEffect as x, useCallback as P } from "react";
+import { useDocumentContext as q } from "../../contexts/RPDocumentContext.js";
+import { PixelsPerInch as V, AnnotationMode as O } from "@pdf-viewer/pdfium/compat";
 import "react/jsx-runtime";
 import "./useLoadPdf.js";
+import "@pdf-viewer/pdfium";
 import "../types.js";
 import "../../de_DE-a553b162.js";
 import "../getThumbnailViewport.js";
@@ -12,174 +13,165 @@ import "../appConsole.js";
 import "./usePdfProperties.js";
 import "../convertPdfDate.js";
 import "../formatFileSize.js";
-const re = () => {
-  const { pdf: l, pages: f } = O(), [D, E] = g({
+const ne = () => {
+  const { pdf: l, pages: f } = q(), [T, E] = g({
     loadedPages: 0,
     totalPages: 0,
     percentage: 0
-  }), [T, b] = g(!1), [A, y] = g(!1), [Z, L] = g(null), [F, w] = g(void 0), s = N(!1);
-  R(() => {
-    s.current;
-  }, [s]);
+  }), [A, y] = g(!1), [R, b] = g(!1), [M, S] = g(null), [Z, w] = g(void 0), i = k(!1);
+  x(() => {
+    i.current;
+  }, [i]);
   const C = P(() => {
-    document.documentElement.classList.remove("rp-print-html-printing"), document.body.classList.remove("rp-print-body-printing");
-    const e = document.querySelector(".rp-print-zone");
-    e && e.remove();
-  }, []), a = P(() => {
-    s.current = !1, b(!1), y(!1), L(null), w(void 0), E({
+    document.documentElement.classList.remove("rp-print-html-printing"), document.body.classList.remove("rp-print-body-printing"), document.querySelector(".rp-print-zone");
+  }, []), s = P(() => {
+    i.current = !1, y(!1), b(!1), S(null), w(void 0), E({
       loadedPages: 0,
       totalPages: 0,
       percentage: 0
     });
-  }, []), M = () => {
-    s.current = !0;
+  }, []), F = () => {
+    i.current = !0;
   }, I = async ({
     scratchCanvas: e,
-    pdfDocument: n,
+    pdfDocument: r,
     pageNumber: t,
-    viewerPdfPage: o,
-    printResolution: r,
-    optionalContentConfigPromise: i,
-    printAnnotationStoragePromise: u
+    viewerPdfPage: n,
+    printResolution: o,
+    optionalContentConfigPromise: c,
+    printAnnotationStoragePromise: d
   }) => {
-    if (s.current) {
-      a();
+    if (i.current) {
+      s();
       return;
     }
-    const c = r / X.PDF;
-    e.width = Math.floor(o.width * c), e.height = Math.floor(o.height * c);
+    const a = o / V.PDF;
+    e.width = Math.floor(n.width * a), e.height = Math.floor(n.height * a);
     const p = e.getContext("2d");
     p.save(), p.fillStyle = "rgb(255, 255, 255)", p.fillRect(0, 0, e.width, e.height), p.restore();
-    const [m, h] = await Promise.all([
-      n.getPage(t),
-      u
+    const [u, h] = await Promise.all([
+      r.getPage(t),
+      d
     ]);
-    if (s.current) {
-      a();
+    if (i.current) {
+      s();
       return;
     }
     const v = {
       canvas: e,
       canvasContext: p,
-      transform: [c, 0, 0, c, 0, 0],
-      viewport: m.getViewport({ scale: 1, rotation: o.rotation }),
+      transform: [a, 0, 0, a, 0, 0],
+      viewport: u.getViewport({ scale: 1, rotation: n.rotation }),
       intent: "print",
-      annotationMode: q.ENABLE_STORAGE,
-      optionalContentConfigPromise: i,
+      annotationMode: O.ENABLE_STORAGE,
+      optionalContentConfigPromise: c,
       printAnnotationStorage: h
     };
     try {
-      return m.render(v).promise;
-    } catch (d) {
-      throw d instanceof B || console.error(d), d;
+      return u.render(v).promise;
+    } catch (m) {
+      throw console.error(m), m;
     }
-  }, S = P(() => {
+  }, L = P(() => {
     const e = window.print;
-    return new Promise((n) => {
-      const t = (i) => {
+    return new Promise((r) => {
+      const t = (c) => {
         setTimeout(() => {
-          e.call(window), setTimeout(() => i(), 20);
+          e.call(window), setTimeout(() => c(), 20);
         }, 0);
       };
       if (document.querySelector(".rp-print-zone")) {
-        t(n);
+        t(r);
         return;
       }
-      const r = new MutationObserver(() => {
-        document.querySelector(".rp-print-zone") && (t(n), r.disconnect());
+      const o = new MutationObserver(() => {
+        document.querySelector(".rp-print-zone") && (t(r), o.disconnect());
       });
-      r.observe(document.body, { childList: !0, subtree: !0 });
+      o.observe(document.body, { childList: !0, subtree: !0 });
     });
-  }, []), U = async (e) => {
-    const n = document.createElement("img"), t = document.createElement("div");
-    return t.classList.add("rp-print-page"), await new Promise((o, r) => {
-      e.toBlob((i) => {
-        i ? (n.src = URL.createObjectURL(i), n.onload = () => {
-          URL.revokeObjectURL(n.src), o();
-        }, n.onerror = r) : r(new Error("Failed to create blob"));
-      });
-    }).catch(() => {
-    }), t.appendChild(n), t;
-  }, x = (e, n) => {
+  }, []), z = (e) => {
+    const r = document.createElement("img"), t = document.createElement("div");
+    return t.classList.add("rp-print-page"), r.src = e.toDataURL(), t.appendChild(r), t;
+  }, D = (e, r) => {
     const t = document.createElement("div");
     t.classList.add("rp-print-zone");
-    const o = document.createElement("style"), r = n.get(1);
-    if (r) {
-      const { width: i, height: u } = r == null ? void 0 : r.page.getViewport({ scale: 1 });
-      o.innerHTML = `@page { size: ${i}px ${u}px }`;
+    const n = document.createElement("style"), o = r.get(1);
+    if (o) {
+      const c = o.page.getViewport({ scale: 1 }), { width: d, height: a } = c;
+      n.innerHTML = `@page { size: ${d}pt ${a}pt; margin: 0; }`;
     }
-    return t.appendChild(o), t.append(...e), t;
-  }, k = P(
+    return t.appendChild(n), t.append(...e), t;
+  }, N = P(
     async (e) => {
       if (!l)
         return;
-      a();
-      const n = e && "visibleDefaultProgress" in e ? e : void 0;
-      (n == null ? void 0 : n.visibleDefaultProgress) !== void 0 ? w(n.visibleDefaultProgress) : w(!0);
-      const t = document.createElement("canvas"), o = [];
+      s();
+      const r = e && "visibleDefaultProgress" in e ? e : void 0;
+      (r == null ? void 0 : r.visibleDefaultProgress) !== void 0 ? w(r.visibleDefaultProgress) : w(!0);
+      const t = document.createElement("canvas"), n = [];
       try {
         l.isPureXfa && console.warn("[rp] XFA Form is not supported at the moment.");
-        const i = l.getOptionalContentConfig({ intent: "print" }), u = Promise.resolve(
+        const c = l.getOptionalContentConfig({ intent: "print" }), d = Promise.resolve(
           l.annotationStorage.print ?? void 0
-        ), c = f.size;
-        for (const [m, h] of f) {
-          if (s.current) {
-            a();
+        ), a = f.size;
+        for (const [u, h] of f) {
+          if (i.current) {
+            s();
             return;
           }
           const v = h.page.getViewport({ scale: 1 });
           if (await I({
             scratchCanvas: t,
             pdfDocument: l,
-            pageNumber: m,
+            pageNumber: u,
             viewerPdfPage: v,
             printResolution: 150,
-            optionalContentConfigPromise: i,
-            printAnnotationStoragePromise: u
-          }), s.current) {
-            a();
+            optionalContentConfigPromise: c,
+            printAnnotationStoragePromise: d
+          }), i.current) {
+            s();
             return;
           }
-          const d = await U(t);
-          o.push(d);
-          const z = parseFloat((o.length / c * 100).toFixed(2));
+          const m = z(t);
+          n.push(m);
+          const X = parseFloat((n.length / a * 100).toFixed(2));
           E({
-            loadedPages: m,
-            totalPages: c,
-            percentage: z
+            loadedPages: u,
+            totalPages: a,
+            percentage: X
           });
         }
-        if (s.current) {
-          a();
+        if (i.current) {
+          s();
           return;
         }
-        const p = x(o, f);
-        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), b(!0), await S();
-      } catch (r) {
-        y(!0), r instanceof Error && L(r);
+        const p = D(n, f);
+        document.body.appendChild(p), document.documentElement.classList.add("rp-print-html-printing"), document.body.classList.add("rp-print-body-printing"), y(!0), await L();
+      } catch (o) {
+        b(!0), o instanceof Error && S(o);
       } finally {
         t.height = 0, t.width = 0;
       }
     },
-    [l, f, s, a, x, S]
+    [l, f, i, s, D, L]
   );
-  return R(() => {
+  return x(() => {
     const e = () => {
-      a(), C();
+      s(), C();
     };
     return window.addEventListener("afterprint", e, !0), () => {
       window.removeEventListener("afterprint", e, !0);
     };
-  }, [C, a]), {
-    print: k,
-    cancel: M,
-    progress: D,
-    isComplete: T,
-    isError: A,
-    error: Z,
-    showDefaultProgress: F
+  }, [C, s]), {
+    print: N,
+    cancel: F,
+    progress: T,
+    isComplete: A,
+    isError: R,
+    error: M,
+    showDefaultProgress: Z
   };
 };
 export {
-  re as usePrint
+  ne as usePrint
 };

package/dist/utils/hooks/useRotate.js

@@ -5,7 +5,8 @@ import "../appConsole.js";
 import "../../contexts/InitialStateContext.js";
 import "../../contexts/RPDocumentContext.js";
 import "./useLoadPdf.js";
-import "pdfjs-dist";
+import "@pdf-viewer/pdfium";
+import "@pdf-viewer/pdfium/compat";
 import "../types.js";
 import "../../de_DE-a553b162.js";
 import "../getThumbnailViewport.js";
@@ -14,7 +15,7 @@ import "../../contexts/DocumentPasswordContext.js";
 import "./usePdfProperties.js";
 import "../convertPdfDate.js";
 import "../formatFileSize.js";
-const g = () => {
+const j = () => {
   const { setRotate: t } = p(), i = r(() => {
     t((o) => (o + 90) % 360);
   }, [t]), m = r(() => {
@@ -23,5 +24,5 @@ const g = () => {
   return { handleRotateClockwise: i, handleRotateCounterclockwise: m };
 };
 export {
-  g as useRotate
+  j as useRotate
 };

package/dist/utils/hooks/useScrollToPage.js

@@ -1,6 +1,6 @@
 import "react";
 import "../../contexts/ScrollModeContext.js";
-import { a as G } from "../../PaginationContext-9217cab4.js";
+import { a as H } from "../../PaginationContext-9217cab4.js";
 import "../../contexts/ViewModeContext.js";
 import "../types.js";
 import "../../contexts/VirtualScrollContext.js";
@@ -16,7 +16,8 @@ import "../../contexts/InitialStateContext.js";
 import "../../de_DE-a553b162.js";
 import "../../contexts/RPDocumentContext.js";
 import "./useLoadPdf.js";
-import "pdfjs-dist";
+import "@pdf-viewer/pdfium";
+import "@pdf-viewer/pdfium/compat";
 import "../getThumbnailViewport.js";
 import "../../contexts/ConfigContext.js";
 import "../../contexts/DocumentPasswordContext.js";
@@ -33,5 +34,5 @@ import "../getZoomLevel.js";
 import "../../contexts/RotationContext.js";
 import "../../contexts/PagesRotateContext.js";
 export {
-  G as useScrollToPage
+  H as useScrollToPage
 };