@react-pdf-kit/viewer 2.5.0-beta.0 → 2.5.0-beta.2

package/dist/components/RPPages.js

@@ -1,15 +1,15 @@
 import { jsx as w, jsxs as Se, Fragment as ct } from "react/jsx-runtime";
-import { createElement as ue, PureComponent as dt, Component as ut, memo as ft, useRef as K, useState as mt, useMemo as Ie, useCallback as se, useEffect as ee } from "react";
+import { createElement as fe, PureComponent as dt, Component as ut, memo as ft, useRef as K, useState as mt, useMemo as Ie, useCallback as se, useEffect as ee } from "react";
 import { RPPage as Te } from "./page/RPPage.js";
 import { useVirtualReactWindow as pt } from "../utils/hooks/useVirtualReactWindow.js";
 import { useVirtualScrollContext as ht } from "../contexts/VirtualScrollContext.js";
-import { a as gt, u as vt } from "../PaginationContext-ec777f80.js";
+import { a as gt, u as vt } from "../PaginationContext-87f832f2.js";
 import { useDocumentContext as _t } from "../contexts/RPDocumentContext.js";
 import { useViewModeContext as wt } from "../contexts/ViewModeContext.js";
 import { useScrollModeContext as Ct } from "../contexts/ScrollModeContext.js";
 import { SelectionMode as St, ViewMode as Re, ScrollMode as xe, ErrorType as ye } from "../utils/types.js";
 import { useFullScreenContext as It } from "../contexts/FullScreenContext.js";
-import { c as de } from "../clsx-0c6e471a.js";
+import { c as ue } from "../clsx-0c6e471a.js";
 import { DualPage as Tt } from "./page/DualPage.js";
 import { DualPageWithCover as Rt } from "./page/DualPageWithCover.js";
 import { SinglePage as xt } from "./page/SinglePage.js";
@@ -205,8 +205,8 @@ var Jt = 150, Qt = function(e) {
   e.data;
   var r = e.rowIndex;
   return r + ":" + t;
-}, fe = null, me = null, pe = null;
-process.env.NODE_ENV !== "production" && typeof window < "u" && typeof window.WeakSet < "u" && (fe = /* @__PURE__ */ new WeakSet(), me = /* @__PURE__ */ new WeakSet(), pe = /* @__PURE__ */ new WeakSet());
+}, me = null, pe = null, he = null;
+process.env.NODE_ENV !== "production" && typeof window < "u" && typeof window.WeakSet < "u" && (me = /* @__PURE__ */ new WeakSet(), pe = /* @__PURE__ */ new WeakSet(), he = /* @__PURE__ */ new WeakSet());
 function Xt(n) {
   var e, t = n.getColumnOffset, r = n.getColumnStartIndexForOffset, s = n.getColumnStopIndexForStartIndex, l = n.getColumnWidth, a = n.getEstimatedTotalHeight, c = n.getEstimatedTotalWidth, u = n.getOffsetForColumnAndAlignment, g = n.getOffsetForRowAndAlignment, h = n.getRowHeight, I = n.getRowOffset, i = n.getRowStartIndexForOffset, L = n.getRowStopIndexForStartIndex, T = n.initInstanceProps, R = n.shouldResetStyleCacheOnItemSizeChange, H = n.validateProps;
   return e = /* @__PURE__ */ function(M) {
@@ -352,11 +352,11 @@ function Xt(n) {
     }, E.componentWillUnmount = function() {
       this._resetIsScrollingTimeoutId !== null && Ue(this._resetIsScrollingTimeoutId);
     }, E.render = function() {
-      var o = this.props, f = o.children, d = o.className, m = o.columnCount, C = o.direction, p = o.height, S = o.innerRef, O = o.innerElementType, P = o.innerTagName, x = o.itemData, z = o.itemKey, y = z === void 0 ? Qt : z, W = o.outerElementType, k = o.outerTagName, U = o.rowCount, A = o.style, G = o.useIsScrolling, D = o.width, V = this.state.isScrolling, te = this._getHorizontalRangeToRender(), re = te[0], ae = te[1], ne = this._getVerticalRangeToRender(), J = ne[0], he = ne[1], Q = [];
+      var o = this.props, f = o.children, d = o.className, m = o.columnCount, C = o.direction, p = o.height, S = o.innerRef, O = o.innerElementType, P = o.innerTagName, x = o.itemData, z = o.itemKey, y = z === void 0 ? Qt : z, W = o.outerElementType, k = o.outerTagName, U = o.rowCount, A = o.style, G = o.useIsScrolling, D = o.width, V = this.state.isScrolling, te = this._getHorizontalRangeToRender(), re = te[0], ae = te[1], ne = this._getVerticalRangeToRender(), J = ne[0], ge = ne[1], Q = [];
       if (m > 0 && U)
-        for (var $ = J; $ <= he; $++)
+        for (var $ = J; $ <= ge; $++)
           for (var j = re; j <= ae; j++)
-            Q.push(ue(f, {
+            Q.push(fe(f, {
               columnIndex: j,
               data: x,
               isScrolling: G ? V : void 0,
@@ -369,7 +369,7 @@ function Xt(n) {
               style: this._getItemStyle($, j)
             }));
       var le = a(this.props, this._instanceProps), ce = c(this.props, this._instanceProps);
-      return ue(W || k || "div", {
+      return fe(W || k || "div", {
         className: d,
         onScroll: this._onScroll,
         ref: this._outerRefSetter,
@@ -382,7 +382,7 @@ function Xt(n) {
           willChange: "transform",
           direction: C
         }, A)
-      }, ue(O || P || "div", {
+      }, fe(O || P || "div", {
         children: Q,
         ref: S,
         style: {
@@ -423,7 +423,7 @@ function Xt(n) {
 var Yt = function(e, t) {
   var r = e.children, s = e.direction, l = e.height, a = e.innerTagName, c = e.outerTagName, u = e.overscanColumnsCount, g = e.overscanCount, h = e.overscanRowsCount, I = e.width, i = t.instance;
   if (process.env.NODE_ENV !== "production") {
-    if (typeof g == "number" && fe && !fe.has(i) && (fe.add(i), console.warn("The overscanCount prop has been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")), (typeof u == "number" || typeof h == "number") && me && !me.has(i) && (me.add(i), console.warn("The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")), (a != null || c != null) && pe && !pe.has(i) && (pe.add(i), console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.")), r == null)
+    if (typeof g == "number" && me && !me.has(i) && (me.add(i), console.warn("The overscanCount prop has been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")), (typeof u == "number" || typeof h == "number") && pe && !pe.has(i) && (pe.add(i), console.warn("The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")), (a != null || c != null) && he && !he.has(i) && (he.add(i), console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.")), r == null)
       throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (r === null ? "null" : typeof r) + '" was specified.'));
     switch (s) {
       case "ltr":
@@ -750,7 +750,7 @@ class sr extends ut {
       overflow: "visible"
     }, R = {};
     let H = !1;
-    return s || (i === 0 && (H = !0), T.height = 0, R.height = i, R.scaledHeight = i), l || (L === 0 && (H = !0), T.width = 0, R.width = L, R.scaledWidth = L), a && (H = !1), ue(h, {
+    return s || (i === 0 && (H = !0), T.height = 0, R.height = i, R.scaledHeight = i), l || (L === 0 && (H = !0), T.width = 0, R.width = L, R.scaledWidth = L), a && (H = !1), fe(h, {
       ref: this._setRef,
       style: {
         ...T,
@@ -826,8 +826,8 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
     estimatedColumnWidth: te,
     estimatedRowHeight: re,
     totalDimension: ae
-  } = pt(), ne = Ot(L, 100), { onScroll: J, onTextSelect: he } = kt();
-  Vt({ onTextSelect: he, pagesRef: r });
+  } = pt(), ne = Ot(L, 100), { onScroll: J, onTextSelect: ge } = kt();
+  Vt({ onTextSelect: ge, pagesRef: r });
   const Q = K();
   Wt(D, A, i, m);
   const $ = K({
@@ -838,37 +838,37 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
   const { isPressed: j } = yt(), { selectionMode: le } = bt(), { initializeGrabScroll: ce, resetGrabState: Ye } = zt({
     isPressed: j
   }), ie = Ie(() => le === St.HAND, [le]), et = Ie(() => {
-    const v = Array.from({ length: D }, (_, B) => V(B));
+    const _ = Array.from({ length: D }, (v, B) => V(B));
     return {
       columnCount: D,
       isDualPageWithCover: m === Re.DUAL_PAGE_WITH_COVER,
-      columnWidths: v,
+      columnWidths: _,
       totalPages: f
     };
-  }, [D, m, V, f]), ge = se(
-    (v) => {
-      const _ = document.activeElement !== r;
-      !k && _ || (["ArrowUp", "ArrowLeft"].includes(v.key) ? (v.preventDefault(), E()) : ["ArrowDown", "ArrowRight"].includes(v.key) && (v.preventDefault(), b()));
+  }, [D, m, V, f]), ve = se(
+    (_) => {
+      const v = document.activeElement !== r;
+      !k && v || (["ArrowUp", "ArrowLeft"].includes(_.key) ? (_.preventDefault(), E()) : ["ArrowDown", "ArrowRight"].includes(_.key) && (_.preventDefault(), b()));
     },
     [b, E, k, d]
   );
-  ee(() => (window.addEventListener("keydown", ge), () => {
-    window.removeEventListener("keydown", ge);
-  }), [ge]), ee(() => {
+  ee(() => (window.addEventListener("keydown", ve), () => {
+    window.removeEventListener("keydown", ve);
+  }), [ve]), ee(() => {
     if (C.current && (C.current.style.position = "relative"), !!c)
-      for (let v = 0; v < A; v++)
-        for (let _ = 0; _ < D; _++)
+      for (let _ = 0; _ < A; _++)
+        for (let v = 0; v < D; v++)
           c.resetAfterIndices({
-            columnIndex: _,
-            rowIndex: v,
+            columnIndex: v,
+            rowIndex: _,
             shouldForceUpdate: !0
           });
   }, [A, D, U, c]);
   const tt = se(
-    (v, _) => {
+    (_, v) => {
       if (!i)
         return { scrollTop: 0, scrollLeft: 0 };
-      const B = $.current.scrollTop > _, X = $.current.scrollLeft > v;
+      const B = $.current.scrollTop > v, X = $.current.scrollLeft > _;
       return B || X ? $.current : {
         scrollTop: i.scrollTop,
         scrollLeft: i.scrollLeft
@@ -876,7 +876,7 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
     },
     [i]
   ), We = se(
-    (v, _) => {
+    (_, v) => {
       if (z.current.viewMode !== m || z.current.scrollMode !== d) {
         Q.current && clearTimeout(Q.current), y.current = !0, a(o, "auto"), Q.current = setTimeout(() => {
           requestAnimationFrame(() => {
@@ -885,28 +885,35 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
         }, 100);
         return;
       }
-      const X = v.scrollTop, ve = v.scrollLeft;
-      if (!_.height || !_.width)
+      const X = _.scrollTop, de = _.scrollLeft;
+      if (!v.height || !v.width)
         return;
       y.current = !0;
-      const { height: Y, width: _e } = _, { height: we, width: Ce } = x.current;
+      const { height: Y, width: _e } = v, { height: we, width: Ce } = x.current;
       if (we === Y && Ce === _e)
         return;
       if (R.current && e > 1) {
         x.current = {
-          height: _.height,
-          width: _.width
+          height: v.height,
+          width: v.width
         };
         return;
       }
       if (!we || !Ce) {
         x.current = {
-          height: _.height,
-          width: _.width
+          height: v.height,
+          width: v.width
         };
         return;
       }
-      const it = X / we * Y, st = ve / Ce * _e, at = Math.round(Math.min(it, Y)) || 0, lt = Math.round(Math.min(st, _e)) || 0;
+      if (X === 0 && de === 0) {
+        x.current = {
+          height: v.height,
+          width: v.width
+        };
+        return;
+      }
+      const it = X / we * Y, st = de / Ce * _e, at = Math.round(Math.min(it, Y)) || 0, lt = Math.round(Math.min(st, _e)) || 0;
       W.current = setTimeout(() => {
         requestAnimationFrame(() => {
           i == null || i.scrollTo({
@@ -916,31 +923,31 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
           });
         });
       }, 0), x.current = {
-        height: _.height,
-        width: _.width
+        height: v.height,
+        width: v.width
       };
     },
     [i, m, d, a, e]
   );
   ee(() => {
     clearTimeout(W.current);
-    const v = Array.from({ length: A }).reduce(
-      (X, ve, Y) => X + G(Y),
+    const _ = Array.from({ length: A }).reduce(
+      (X, de, Y) => X + G(Y),
       0
-    ), _ = Array.from({ length: D }).reduce(
-      (X, ve, Y) => X + V(Y),
+    ), v = Array.from({ length: D }).reduce(
+      (X, de, Y) => X + V(Y),
       0
-    ), B = tt(_, v);
-    $.current = B, We(B, { height: v, width: _ }), I({
-      height: v,
-      width: _
+    ), B = tt(v, _);
+    $.current = B, We(B, { height: _, width: v }), I({
+      height: _,
+      width: v
     });
   }, [U, A, D, We]);
   const rt = se(
-    (v) => {
+    (_) => {
       $.current = {
-        scrollTop: v.scrollTop,
-        scrollLeft: v.scrollLeft
+        scrollTop: _.scrollTop,
+        scrollLeft: _.scrollLeft
       };
     },
     [i]
@@ -953,13 +960,13 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
   }, [i, T, J]), ee(() => () => {
     Q.current && clearTimeout(Q.current);
   }, []);
-  const ot = Ie(() => de(F["rp-pages-container"], {
+  const ot = Ie(() => ue(F["rp-pages-container"], {
     [F["rp-cursor-grab"]]: ie && !j,
     [F["rp-cursor-grabbing"]]: ie && j
   }), [ie, j]), nt = se(
-    (v) => {
-      if (ie && v) {
-        const _ = de(F["rp-pages"]), B = document.querySelector(`.${_}`);
+    (_) => {
+      if (ie && _) {
+        const v = ue(F["rp-pages"]), B = document.querySelector(`.${v}`);
         ce(B);
       }
     },
@@ -993,22 +1000,22 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
           "--scale-round-x": `${Ae(n.current.sx)[1]}px`,
           "--scale-round-y": `${Ae(n.current.sy)[1]}px`
         },
-        children: /* @__PURE__ */ w(sr, { style: { minHeight: "50px" }, children: ({ width: v, height: _ }) => /* @__PURE__ */ w(
+        children: /* @__PURE__ */ w(sr, { style: { minHeight: "50px" }, children: ({ width: _, height: v }) => /* @__PURE__ */ w(
           "div",
           {
             "data-rp": "pages",
             ref: nt,
             style: {
-              width: v,
-              height: _,
+              width: _,
+              height: v,
               ...H && { visibility: "hidden" }
             },
-            children: d === xe.PAGE_SCROLLING ? S === ye.INVALID_OR_CORRUPTED_PDF ? /* @__PURE__ */ w("div", { className: F["rp-load-error"], style: { width: v, height: _ }, children: /* @__PURE__ */ w("div", { className: F["rp-load-error-message"], children: "Invalid or corrupted PDF file." }) }) : /* @__PURE__ */ w(
+            children: d === xe.PAGE_SCROLLING ? S === ye.INVALID_OR_CORRUPTED_PDF ? /* @__PURE__ */ w("div", { className: F["rp-load-error"], style: { width: _, height: v }, children: /* @__PURE__ */ w("div", { className: F["rp-load-error-message"], children: "Invalid or corrupted PDF file." }) }) : /* @__PURE__ */ w(
               "div",
               {
                 ref: g,
-                style: { width: v, height: _ },
-                className: de(F["rp-pages"], F["rp-page-scrolling-wrapper"]),
+                style: { width: _, height: v },
+                className: ue(F["rp-pages"], F["rp-page-scrolling-wrapper"]),
                 children: m === Re.DUAL_PAGE ? /* @__PURE__ */ w(Tt, { widths: V, heights: G }) : m === Re.DUAL_PAGE_WITH_COVER ? /* @__PURE__ */ w(Rt, { widths: V, heights: G }) : /* @__PURE__ */ w(xt, { widths: V, heights: G })
               }
             ) : re ? /* @__PURE__ */ w(
@@ -1022,12 +1029,12 @@ const ar = ft(({ columnIndex: n, rowIndex: e, data: t, style: r }) => {
                 columnCount: D,
                 columnWidth: V,
                 rowHeight: G,
-                height: _,
-                width: v,
+                height: v,
+                width: _,
                 estimatedColumnWidth: te,
                 estimatedRowHeight: re,
                 rowCount: A,
-                className: de(
+                className: ue(
                   F["rp-pages"],
                   d === xe.HORIZONTAL_SCROLLING ? F["rp-pages-horizontal-scroll"] : ""
                 ),

package/dist/components/RPProvider.js

@@ -23,7 +23,7 @@ import "../utils/hooks/usePdfProperties.js";
 import "../utils/convertPdfDate.js";
 import "../utils/formatFileSize.js";
 import "../utils/appConsole.js";
-import "../PaginationContext-ec777f80.js";
+import "../PaginationContext-87f832f2.js";
 import "../contexts/ScrollModeContext.js";
 import "../contexts/InitialStateContext.js";
 import "../contexts/GlobalCurrentPage.js";
@@ -70,12 +70,13 @@ import "../utils/hooks/useLicense.js";
 import "../contexts/DownloadContext.js";
 import "../contexts/ElementPageContext.js";
 import "../utils/getElementPositionInPage.js";
+import "../contexts/ElementThumbnailContext.js";
 import "../contexts/RenderQueueProvider.js";
 import "../utils/Queue.js";
 import "../utils/renderPage.js";
 import "./icons/LoaderIcon.js";
 import "../clsx-0c6e471a.js";
-const mo = (e) => {
+const po = (e) => {
   const {
     children: n,
     src: o,
@@ -123,5 +124,5 @@ const mo = (e) => {
   ) });
 };
 export {
-  mo as RPProvider
+  po as RPProvider
 };

package/dist/components/layout/RPDefaultLayout.js

@@ -22,7 +22,7 @@ import "../../clsx-0c6e471a.js";
 import "../../utils/withRef.js";
 import "../ui/Input.js";
 import "../../Paginate.module-4eef00aa.js";
-import "../../PaginationContext-ec777f80.js";
+import "../../PaginationContext-87f832f2.js";
 import "../../utils/types.js";
 import "../../de_DE-8145915f.js";
 import "../../contexts/ScrollModeContext.js";
@@ -139,9 +139,14 @@ import "./sidebar/Thumbnail.js";
 import "../../contexts/RenderQueueProvider.js";
 import "../../utils/Queue.js";
 import "../../utils/renderPage.js";
+import "./sidebar/CustomThumbnailElement.js";
+import "../../contexts/ElementThumbnailContext.js";
+import "../../contexts/LicenseContext.js";
+import "../../utils/hooks/useLicense.js";
 import "../../contexts/ThumbnailsContext.js";
 import "../../utils/hooks/useThumbnail.js";
 import "../../utils/getThumbnailViewport.js";
+import "../../utils/const.js";
 import "../../utils/hooks/useInfiniteScroll.js";
 import "../../contexts/DropFileZoneContext.js";
 import "../icons/LightPdfIcon.js";
@@ -150,12 +155,11 @@ import "../../utils/hooks/useDropFileZone.js";
 import "../../contexts/LayoutDropFileZoneContext.js";
 import "../../utils/hooks/useLoadPdf.js";
 import "../../contexts/ConfigContext.js";
-import "../../utils/const.js";
 import "../../utils/hooks/usePdfProperties.js";
 import "../../utils/convertPdfDate.js";
 import "../../utils/formatFileSize.js";
 import "../../contexts/ThemeContext.js";
-const It = L((n, a) => {
+const Et = L((n, a) => {
   const {
     children: l,
     slots: s,
@@ -237,5 +241,5 @@ const It = L((n, a) => {
   ] }) }) }) }) });
 });
 export {
-  It as RPDefaultLayout
+  Et as RPDefaultLayout
 };

package/dist/components/layout/RPLayout.js

@@ -18,7 +18,7 @@ import "../../ToolbarLayout.module-6e339802.js";
 import "./sidebar/Thumbnails.js";
 import "./sidebar/Thumbnail.js";
 import "../icons/LoaderIcon.js";
-import "../../PaginationContext-ec777f80.js";
+import "../../PaginationContext-87f832f2.js";
 import "../../utils/types.js";
 import "../../de_DE-8145915f.js";
 import "../../contexts/ScrollModeContext.js";
@@ -44,9 +44,14 @@ import "../../contexts/RenderQueueProvider.js";
 import "../../utils/Queue.js";
 import "../../utils/renderPage.js";
 import "pdfjs-dist";
+import "./sidebar/CustomThumbnailElement.js";
+import "../../contexts/ElementThumbnailContext.js";
+import "../../contexts/LicenseContext.js";
+import "../../utils/hooks/useLicense.js";
 import "../../contexts/ThumbnailsContext.js";
 import "../../utils/hooks/useThumbnail.js";
 import "../../utils/getThumbnailViewport.js";
+import "../../utils/const.js";
 import "../../utils/hooks/useInfiniteScroll.js";
 import "../../utils/withRef.js";
 import "../../contexts/ToolbarComponentContext.js";
@@ -152,7 +157,6 @@ import "./toolbar/ToolbarCustom.js";
 import "../../contexts/DropFileZoneContext.js";
 import "../../utils/hooks/useLoadPdf.js";
 import "../../contexts/ConfigContext.js";
-import "../../utils/const.js";
 import "../../utils/hooks/usePdfProperties.js";
 import "../../utils/convertPdfDate.js";
 import "../../utils/formatFileSize.js";
@@ -160,7 +164,7 @@ import "../icons/LightPdfIcon.js";
 import "../icons/DarkPdfIcon.js";
 import "../../utils/hooks/useDropFileZone.js";
 import "../../contexts/ThemeContext.js";
-const Rr = (e) => {
+const Ir = (e) => {
   const {
     children: n,
     style: a,
@@ -213,5 +217,5 @@ const Rr = (e) => {
   ] }) }) }) });
 };
 export {
-  Rr as RPLayout
+  Ir as RPLayout
 };

package/dist/components/layout/sidebar/CustomThumbnailElement.js

@@ -0,0 +1,53 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as p, useRef as u, useEffect as s } from "react";
+import { useElementThumbnailContext as l } from "../../../contexts/ElementThumbnailContext.js";
+import "../../../utils/types.js";
+import "../../../de_DE-8145915f.js";
+import "../../../contexts/PagesRotateContext.js";
+import "../../../contexts/RPDocumentContext.js";
+import "../../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../../utils/getThumbnailViewport.js";
+import "../../../contexts/ConfigContext.js";
+import "../../../contexts/DocumentPasswordContext.js";
+import "../../../utils/appConsole.js";
+import "../../../utils/const.js";
+import "../../../utils/hooks/usePdfProperties.js";
+import "../../../utils/convertPdfDate.js";
+import "../../../utils/formatFileSize.js";
+import "../../../contexts/RotationContext.js";
+import "../../../contexts/InitialStateContext.js";
+import "../../../contexts/EventCallbackContext.js";
+import "../../../contexts/LicenseContext.js";
+import "../../../utils/hooks/useLicense.js";
+import "../../../contexts/ThumbnailsContext.js";
+import "../../../utils/hooks/useThumbnail.js";
+import "../../../contexts/SmoothScrollContext.js";
+const c = {
+  "rp-custom-thumbnail-element": "_rp-custom-thumbnail-element_h5ef7_1"
+}, a = ({ child: t }) => {
+  const r = u(null);
+  return s(() => {
+    var m;
+    return (m = r.current) == null || m.appendChild(t), () => {
+      var o;
+      (o = r.current) == null || o.removeChild(t);
+    };
+  }, [t]), /* @__PURE__ */ e("div", { ref: r });
+}, G = ({ pageNumber: t }) => {
+  const { elementList: r } = l(), m = p(() => {
+    var o;
+    return (o = r[t]) == null ? void 0 : o.map((i, n) => i instanceof HTMLElement ? /* @__PURE__ */ e(a, { child: i }, n) : /* @__PURE__ */ e("div", { children: i }, n));
+  }, [r, t]);
+  return m ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: c["rp-custom-thumbnail-element"],
+      "data-rp": `thumbnail-${t}-customElement`,
+      children: m
+    }
+  ) : null;
+};
+export {
+  G as CustomThumbnailElement
+};

package/dist/components/layout/sidebar/RPSidebar.js

@@ -17,7 +17,7 @@ import "../../../contexts/LayoutContainerContext.js";
 import "../../../contexts/ViewportContext.js";
 import "./Thumbnail.js";
 import "../../icons/LoaderIcon.js";
-import "../../../PaginationContext-ec777f80.js";
+import "../../../PaginationContext-87f832f2.js";
 import "../../../utils/types.js";
 import "../../../de_DE-8145915f.js";
 import "../../../contexts/ScrollModeContext.js";
@@ -51,8 +51,12 @@ import "../../../utils/calculatePage.js";
 import "../../../contexts/RenderQueueProvider.js";
 import "../../../utils/Queue.js";
 import "../../../utils/renderPage.js";
-import "../../../utils/hooks/useInfiniteScroll.js";
+import "./CustomThumbnailElement.js";
+import "../../../contexts/ElementThumbnailContext.js";
+import "../../../contexts/LicenseContext.js";
+import "../../../utils/hooks/useLicense.js";
 import "../../../utils/hooks/useThumbnail.js";
+import "../../../utils/hooks/useInfiniteScroll.js";
 import "../../../index-113053cf.js";
 import "react-dom";
 import "../../../index-23911b43.js";
@@ -62,7 +66,7 @@ import "../../../utils/hooks/useLocalization.js";
 const $ = () => {
   const { thumbnailIcon: o } = k(), { thumbnailIcon: p } = P();
   return o || p || /* @__PURE__ */ t(x, {});
-}, zt = () => {
+}, Gt = () => {
   const { active: o, setActive: p } = N(), [c, u] = T(W), e = s(null), a = s(null), { thumbnailTool: i, sidebarEnable: h } = S(), { localeMessages: r } = B(), n = C(() => {
     p((d) => !d);
   }, []), b = I(() => typeof i != "boolean" && i ? /* @__PURE__ */ t(i, { onClick: n, active: o }) : i ? /* @__PURE__ */ t(y, { content: r == null ? void 0 : r.thumbnailTooltip, children: /* @__PURE__ */ t(
@@ -105,5 +109,5 @@ const $ = () => {
   ) });
 };
 export {
-  zt as RPSidebar
+  Gt as RPSidebar
 };