@epam/ai-dial-react-pdf-highlighter 0.2.0-dev.37 → 0.2.0-dev.38

package/dist/ai-dial-react-pdf-highlighter.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@epam/ai-dial-ui-kit"),L=require("@epam/pdf-highlighter-kit"),t=require("react"),k=require("@tabler/icons-react"),z="auto",A="page-fit",V=[{value:z,label:"Auto"},{value:A,label:"Page Fit"},{value:"0.5",label:"50%"},{value:"0.75",label:"75%"},{value:"1",label:"100%"},{value:"1.25",label:"125%"},{value:"1.5",label:"150%"},{value:"2",label:"200%"},{value:"3",label:"300%"}],X={maxWidth:104,format:"image/jpeg",quality:.85},$=15,le="application/pdf",oe=".pdf",Y=({pdf:a,highlights:r,selectedHighlightId:u,autoFocusFirstHighlight:l=!1,selectedPageNumber:d,zoom:c,containerClassName:v,onTotalPagesChange:b,onViewerReady:N,selectedPages:m,viewerOptions:y})=>{const f=t.useRef(null),n=t.useRef(null),[h,E]=t.useState(!1),[w,I]=t.useState(!1),T=t.useRef(b),O=t.useRef(N),_=t.useRef(y);t.useEffect(()=>{T.current=b},[b]),t.useEffect(()=>{O.current=N},[N]),t.useEffect(()=>{_.current=y},[y]);const j=t.useCallback(s=>n.current?.goToHighlight(s),[]);return t.useEffect(()=>{if(!f.current)return;E(!1),I(!1),n.current&&(n.current.destroy(),n.current=null);let s=null,x=!0;const p=()=>{x&&I(!0)};return(async()=>{try{if(s=new L.PDFHighlightViewer,await s.init(f.current,{enableTextSelection:!0,enableVirtualScrolling:!0,bboxOrigin:"top-left",..._.current}),!x){s.destroy();return}if(s.addEventListener("zoomChanged",p),await s.loadPDF(a,{selectedPages:m}),!x){s.destroy();return}const C=s.getTotalPages?.();typeof C=="number"&&C>0&&T.current?.(C),x&&(n.current=s,E(!0))}catch(C){if(!x)return;console.error("Error in initViewer:",C)}})(),()=>{x=!1,s&&(s.removeEventListener("zoomChanged",p),s.destroy())}},[a,m]),t.useEffect(()=>{!h||!n.current||(n.current.loadHighlights(r),l&&r&&r[0]&&j(r[0].id))},[l,j,r,h]),t.useEffect(()=>{h&&w&&u&&j(u)},[j,h,w,u]),t.useEffect(()=>{if(!(!h||!c))if(c===z)n.current?.setZoom?.(L.ZoomMode.AUTO);else if(c===A)n.current?.setZoom?.(L.ZoomMode.PAGE_FIT);else{const s=parseFloat(c);!Number.isNaN(s)&&s>0&&n.current?.setZoom?.(s)}},[h,c]),t.useEffect(()=>{h&&d&&n.current?.setPage?.(d)},[h,d]),t.useEffect(()=>{if(!h||!n.current)return;const s=n.current;O.current?.({getThumbnailsDataUrl:(x,p)=>s.getThumbnailsDataUrl(x,p),zoomIn:()=>s.zoomIn(),zoomOut:()=>s.zoomOut(),getZoom:()=>s.getZoom(),navigateToPage:x=>s.setPage?.(x),setPageDisplayRotation:(x,p,S)=>s.setPageDisplayRotation(x,p,S),getPageDisplayRotation:x=>s.getPageDisplayRotation(x)})},[h]),e.jsx("div",{ref:f,className:i.mergeClasses("grow min-w-0 overflow-auto bg-layer-raised",v)})},P="h-4 rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave",J=({className:a,ariaLabel:r="pdf preview loading"})=>e.jsx("div",{role:"status","aria-label":r,"aria-live":"polite",className:i.mergeClasses("h-full w-full bg-layer-raised",a),children:e.jsxs("div",{className:"flex h-full w-full flex-col gap-10 px-[60px] pt-10",children:[e.jsx("div",{className:"mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave"}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:i.mergeClasses(P,"w-[28%] max-w-[320px]")})]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:i.mergeClasses(P,"w-[58%] max-w-[520px]")})]})]})}),Q=t.createContext(null),ee=()=>t.useContext(Q),D=V.filter(({value:a})=>{const r=Number.parseFloat(a);return!Number.isNaN(r)&&r>0}),ce=[...D].reverse(),te=(a,r,u)=>{if(D.length===0)return a;const l=Number.parseFloat(a),d=!Number.isNaN(l)&&l>0?l:u,c=typeof d=="number"&&d>0?d:Number.parseFloat(D[0].value);return r===1?(D.find(({value:v})=>Number.parseFloat(v)>c)??D[D.length-1]).value:(ce.find(({value:v})=>Number.parseFloat(v)<c)??D[0]).value};function q(a,r){const u=(a??"").toLowerCase();return(r??"").toLowerCase()===le||u.endsWith(oe)}const W=V.map(a=>({value:a.value,label:a.label})),ae=({fileUrl:a,fileName:r,loadFileCb:u,highlights:l,selectedPageNumber:d,onTotalPagesChange:c,thumbnailPageNumbers:v,onThumbnailsLoaded:b,onViewerReady:N,showLoaderOverlay:m=!1,selectedPages:y})=>{const f=ee(),n=t.useRef(null),[h,E]=t.useState(!1),[w,I]=t.useState(0),[T,O]=t.useState(!1),[_,j]=t.useState(null),[s,x]=t.useState(null),[p,S]=t.useState(z),C=t.useMemo(()=>{if(r)return q(r.toLowerCase());let o;try{o=new URL(a).pathname}catch{o=a.split("?")[0].split("#")[0]}const g=o.split("/").pop()??"";return!g.includes(".")||q(g.toLowerCase())},[r,a]),B=t.useCallback(o=>{I((w+o+l.length)%l.length)},[w,l.length]),U=t.useCallback(o=>{const g=n.current;!g?.getZoom||!o||S(te(p,o,g.getZoom()))},[p]),R=t.useMemo(()=>{if(!(p===z||p===A||V.some(g=>g.value===p))){const g=parseFloat(p);if(!Number.isNaN(g)&&g>0)return[...W,{value:p,label:`${Math.round(g*100)}%`}]}return W},[p]);t.useEffect(()=>{let o=!1;if(j(!0),O(!1),x(null),E(!1),n.current=null,!C){O(!0),j(!1);return}return(async()=>{try{const Z=await(f?f.getFile(a,()=>u(a)):u(a));o||x(Z)}catch{o||(O(!0),x(null))}finally{o||j(!1)}})(),()=>{o=!0}},[a,f,u,C]);const M=t.useCallback(o=>{n.current=o,E(!0),N?.(o)},[N]);return t.useEffect(()=>{const o=v??[],g=n.current?.getThumbnailsDataUrl;if(!o.length||!g||!s||!b||!h)return;let Z=!1;return(async()=>{const K=new Map;for(let F=0;F<o.length&&!Z;F+=$){const se=o.slice(F,F+$);try{const H=await g(se,X);if(Z)break;H.forEach((re,ne)=>K.set(ne,re)),b(new Map(K))}catch(H){console.warn("Thumbnail batch load failed:",H);break}}})(),()=>{Z=!0}},[v,s,b,h]),{file:s,isLoading:_,isError:T,isSupportedFile:C,activeHighlightIndex:w,zoom:p,setZoom:S,zoomSelectOptions:R,viewerApiRef:n,showLoader:!T&&(!!_||m),changeIndex:B,handleZoomChange:U,handleViewerReady:M}},ie=({fileUrl:a,fileName:r,errorLabel:u,occurrencesLabel:l,unsupportedLabel:d,highlights:c,loadFileCb:v,showOccurrences:b=!0,selectedPageNumber:N,containerClassName:m,pdfViewerClassName:y,onTotalPagesChange:f,title:n,thumbnailPageNumbers:h,onThumbnailsLoaded:E,onViewerReady:w,showLoaderOverlay:I=!1,selectedPages:T,selectedHighlightId:O,viewerOptions:_})=>{const{file:j,isError:s,isSupportedFile:x,activeHighlightIndex:p,zoom:S,setZoom:C,zoomSelectOptions:B,showLoader:U,changeIndex:R,handleZoomChange:M,handleViewerReady:G}=ae({fileUrl:a,fileName:r,loadFileCb:v,highlights:c,selectedPageNumber:N,onTotalPagesChange:f,thumbnailPageNumbers:h,onThumbnailsLoaded:E,onViewerReady:w,showLoaderOverlay:I,selectedPages:T});return e.jsxs("div",{className:i.mergeClasses("flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-sunken",m),children:[r&&e.jsx("div",{className:"shrink-0 min-h-0 w-full",children:e.jsx(i.EllipsisTooltip,{className:"dial-tiny-text text-secondary",text:r})}),e.jsxs("div",{className:i.mergeClasses("flex w-full justify-between items-center",b&&n?"gap-2":""),children:[e.jsx("div",{children:b?e.jsxs("div",{className:"flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-raised rounded w-fit",children:[e.jsxs("span",{className:"dial-small-text",children:[l??"Occurrences",":",e.jsx("span",{className:"pl-0.5 min-w-3 inline-block text-right",children:c.length>0?`${p+1}/${c.length}`:"0"})]}),c.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(i.IconButton,{className:"p-0 text-primary !h-6.5",size:i.ElementSize.Small,icon:e.jsx(k.IconChevronDown,{size:16}),"aria-label":"Next occurrence",onClick:()=>R(1)}),e.jsx(i.IconButton,{className:"p-0 text-primary !h-6.5",size:i.ElementSize.Small,icon:e.jsx(k.IconChevronUp,{size:16}),"aria-label":"Previous occurrence",onClick:()=>R(-1)})]})]}):e.jsx("div",{})}),e.jsxs("div",{className:i.mergeClasses("flex flex-1 items-center gap-4 min-w-0",n!=null&&n!==""?"justify-between":"justify-end"),children:[n!=null&&n!==""&&e.jsx(i.EllipsisTooltip,{text:n,className:"dial-body-semi-text text-primary min-w-0"}),e.jsxs("div",{className:"flex gap-0.5 items-center shrink-0",children:[e.jsx("div",{className:"h-6",children:e.jsx(i.Select,{size:i.ElementSize.Small,ariaLabel:"Zoom",fieldClassName:"bg-control-neutral !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-accent-alpha rounded",options:B,value:S,onChange:o=>C(o)})}),e.jsx(i.IconButton,{className:"py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",icon:e.jsx(k.IconMinus,{size:16}),"aria-label":"Zoom out",size:i.ElementSize.Small,onClick:()=>M(-1)}),e.jsx(i.IconButton,{className:"py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",icon:e.jsx(k.IconPlus,{size:16}),"aria-label":"Zoom in",size:i.ElementSize.Small,onClick:()=>M(1)})]})]})]}),e.jsxs("div",{className:"relative flex min-h-0 flex-1",children:[j&&e.jsx(Y,{pdf:j,highlights:c,selectedHighlightId:b?c[p]?.id:O,selectedPageNumber:N,zoom:S,onTotalPagesChange:f,onViewerReady:G,containerClassName:y,selectedPages:T,viewerOptions:_}),U&&e.jsx(J,{className:"absolute inset-0 z-10"}),s&&e.jsx("div",{className:"absolute inset-0 z-20 flex items-center justify-center bg-layer-raised",children:e.jsxs("div",{className:"flex flex-col items-center gap-6 p-10",children:[e.jsx(k.IconAlertTriangle,{size:60,stroke:2,className:"text-secondary"}),e.jsx("div",{className:"text-center dial-small-text whitespace-pre-wrap",children:!x&&d?d:u??"Failed to load document."})]})})]})]})},ue=1200*1e3,de=20,me=({children:a,ttlMs:r=ue,maxEntries:u=de})=>{const l=t.useRef(new Map),d=t.useCallback((m,y)=>{l.current.delete(m),l.current.set(m,y)},[]),c=t.useCallback(()=>{const m=Date.now();for(const[y,f]of l.current.entries())f.file&&m-f.timestamp>r&&l.current.delete(y)},[r]),v=t.useCallback(()=>{for(;l.current.size>u;){const m=l.current.keys().next().value;m&&l.current.delete(m)}},[u]),b=t.useCallback(()=>{l.current.clear()},[]),N=t.useCallback(async(m,y)=>{c();const f=l.current.get(m);if(f){if(d(m,{...f,timestamp:Date.now()}),f.file)return f.file;if(f.promise)return f.promise}const n=Date.now(),h=y().then(w=>{const I={file:w,timestamp:Date.now()};return d(m,I),v(),w}).catch(w=>{throw l.current.delete(m),w});return d(m,{promise:h,timestamp:n}),v(),h},[v,c,d]);return t.useEffect(()=>()=>b(),[b]),e.jsx(Q.Provider,{value:{getFile:N,clearCache:b},children:a})},fe=({pageNum:a,onSelectPage:r,isSelected:u,isLoading:l,isMultiselect:d,thumbnailUrl:c,className:v})=>e.jsxs("button",{type:"button","aria-label":`Page ${a}`,"aria-pressed":u,onClick:b=>{d&&b.target.closest("[data-checkbox-wrapper]")||r(a)},className:i.mergeClasses("flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-control-accent-alpha-hover rounded-sm",u&&(d?"border border-accent bg-control-accent-alpha":"border border-primary"),v),children:[e.jsxs("div",{className:"relative w-[104px] h-[146px] bg-layer-raised rounded-sm overflow-hidden",children:[c?e.jsx("img",{src:c,alt:`Page ${a} thumbnail`,className:"w-full h-full object-cover rounded-sm"}):null,d&&e.jsx("div",{className:"absolute left-1 top-1 z-10","data-checkbox-wrapper":!0,children:e.jsx(i.Checkbox,{id:`page-thumbnail-${a}`,isSelected:u,onChange:()=>r(a),"aria-label":`Select page ${a}`})}),l&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-backdrop rounded-sm",children:e.jsx(i.Spinner,{size:24,fullWidth:!1,ariaLabel:`Loading page ${a}`})})]}),e.jsx("span",{className:"dial-tiny-text text-primary",children:a})]});Object.defineProperty(exports,"RotationDirection",{enumerable:!0,get:()=>L.RotationDirection});exports.AUTO_ZOOM_ID=z;exports.DocumentPreview=ie;exports.DocumentPreviewCacheProvider=me;exports.FIT_ZOOM_ID=A;exports.PDFViewer=Y;exports.PageThumbnail=fe;exports.PdfPreviewLoader=J;exports.THUMBNAIL_BATCH_SIZE=$;exports.THUMBNAIL_IMAGE_OPTIONS=X;exports.ZOOM_OPTIONS=V;exports.getStepZoomOptionValue=te;exports.isPdfFile=q;exports.useDocumentPreview=ae;exports.useDocumentPreviewCache=ee;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@epam/ai-dial-ui-kit"),V=require("@epam/pdf-highlighter-kit"),t=require("react"),z=require("@tabler/icons-react"),L="auto",B="page-fit",U=[{value:L,label:"Auto"},{value:B,label:"Page Fit"},{value:"0.5",label:"50%"},{value:"0.75",label:"75%"},{value:"1",label:"100%"},{value:"1.25",label:"125%"},{value:"1.5",label:"150%"},{value:"2",label:"200%"},{value:"3",label:"300%"}],X={maxWidth:104,format:"image/jpeg",quality:.85},q=15,le="application/pdf",oe=".pdf",Y=({pdf:s,highlights:r,selectedHighlightId:m,autoFocusFirstHighlight:n=!1,selectedPageNumber:f,zoom:o,containerClassName:b,onTotalPagesChange:h,onViewerReady:N,onCurrentPageChange:i,selectedPages:j,viewerOptions:x})=>{const p=t.useRef(null),u=t.useRef(null),[g,w]=t.useState(!1),[O,D]=t.useState(!1),I=t.useRef(h),R=t.useRef(N),S=t.useRef(i),T=t.useRef(x);t.useEffect(()=>{I.current=h},[h]),t.useEffect(()=>{R.current=N},[N]),t.useEffect(()=>{S.current=i},[i]),t.useEffect(()=>{T.current=x},[x]);const P=t.useCallback(a=>u.current?.goToHighlight(a),[]);return t.useEffect(()=>{if(!p.current)return;w(!1),D(!1),u.current&&(u.current.destroy(),u.current=null);let a=null,d=!0;const y=()=>{d&&D(!0)},_=C=>{d&&S.current?.(C.currentPage)};return(async()=>{try{if(a=new V.PDFHighlightViewer,await a.init(p.current,{enableTextSelection:!0,enableVirtualScrolling:!0,bboxOrigin:"top-left",...T.current}),!d){a.destroy();return}if(a.addEventListener("zoomChanged",y),a.addEventListener("pageChanged",_),await a.loadPDF(s,{selectedPages:j}),!d){a.destroy();return}const C=a.getTotalPages?.();typeof C=="number"&&C>0&&I.current?.(C),d&&(u.current=a,w(!0))}catch(C){if(!d)return;console.error("Error in initViewer:",C)}})(),()=>{d=!1,a&&(a.removeEventListener("zoomChanged",y),a.removeEventListener("pageChanged",_),a.destroy())}},[s,j]),t.useEffect(()=>{!g||!u.current||(u.current.loadHighlights(r),n&&r&&r[0]&&P(r[0].id))},[n,P,r,g]),t.useEffect(()=>{g&&O&&m&&P(m)},[P,g,O,m]),t.useEffect(()=>{if(!(!g||!o))if(o===L)u.current?.setZoom?.(V.ZoomMode.AUTO);else if(o===B)u.current?.setZoom?.(V.ZoomMode.PAGE_FIT);else{const a=parseFloat(o);!Number.isNaN(a)&&a>0&&u.current?.setZoom?.(a)}},[g,o]),t.useEffect(()=>{g&&f&&u.current?.setPage?.(f)},[g,f]),t.useEffect(()=>{if(!g||!u.current)return;const a=u.current;R.current?.({getThumbnailsDataUrl:(d,y)=>a.getThumbnailsDataUrl(d,y),zoomIn:()=>a.zoomIn(),zoomOut:()=>a.zoomOut(),getZoom:()=>a.getZoom(),getCurrentPage:()=>a.getCurrentPage(),navigateToPage:d=>a.setPage?.(d),setPageDisplayRotation:(d,y,_)=>a.setPageDisplayRotation(d,y,_),getPageDisplayRotation:d=>a.getPageDisplayRotation(d)})},[g]),e.jsx("div",{ref:p,className:c.mergeClasses("grow min-w-0 overflow-auto bg-layer-raised",b)})},E="h-4 rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave",J=({className:s,ariaLabel:r="pdf preview loading"})=>e.jsx("div",{role:"status","aria-label":r,"aria-live":"polite",className:c.mergeClasses("h-full w-full bg-layer-raised",s),children:e.jsxs("div",{className:"flex h-full w-full flex-col gap-10 px-[60px] pt-10",children:[e.jsx("div",{className:"mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave"}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:E}),e.jsx("div",{className:E}),e.jsx("div",{className:E}),e.jsx("div",{className:E}),e.jsx("div",{className:c.mergeClasses(E,"w-[28%] max-w-[320px]")})]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:E}),e.jsx("div",{className:E}),e.jsx("div",{className:E}),e.jsx("div",{className:E}),e.jsx("div",{className:c.mergeClasses(E,"w-[58%] max-w-[520px]")})]})]})}),Q=t.createContext(null),ee=()=>t.useContext(Q),Z=U.filter(({value:s})=>{const r=Number.parseFloat(s);return!Number.isNaN(r)&&r>0}),ce=[...Z].reverse(),te=(s,r,m)=>{if(Z.length===0)return s;const n=Number.parseFloat(s),f=!Number.isNaN(n)&&n>0?n:m,o=typeof f=="number"&&f>0?f:Number.parseFloat(Z[0].value);return r===1?(Z.find(({value:b})=>Number.parseFloat(b)>o)??Z[Z.length-1]).value:(ce.find(({value:b})=>Number.parseFloat(b)<o)??Z[0]).value};function G(s,r){const m=(s??"").toLowerCase();return(r??"").toLowerCase()===le||m.endsWith(oe)}const W=U.map(s=>({value:s.value,label:s.label})),ae=({fileUrl:s,fileName:r,loadFileCb:m,highlights:n,selectedPageNumber:f,onTotalPagesChange:o,thumbnailPageNumbers:b,onThumbnailsLoaded:h,onViewerReady:N,showLoaderOverlay:i=!1,selectedPages:j})=>{const x=ee(),p=t.useRef(null),[u,g]=t.useState(!1),[w,O]=t.useState(0),[D,I]=t.useState(!1),[R,S]=t.useState(null),[T,P]=t.useState(null),[a,d]=t.useState(L),y=t.useMemo(()=>{if(r)return G(r.toLowerCase());let l;try{l=new URL(s).pathname}catch{l=s.split("?")[0].split("#")[0]}const v=l.split("/").pop()??"";return!v.includes(".")||G(v.toLowerCase())},[r,s]),_=t.useCallback(l=>{O((w+l+n.length)%n.length)},[w,n.length]),M=t.useCallback(l=>{const v=p.current;!v?.getZoom||!l||d(te(a,l,v.getZoom()))},[a]),C=t.useMemo(()=>{if(!(a===L||a===B||U.some(v=>v.value===a))){const v=parseFloat(a);if(!Number.isNaN(v)&&v>0)return[...W,{value:a,label:`${Math.round(v*100)}%`}]}return W},[a]);t.useEffect(()=>{let l=!1;if(S(!0),I(!1),P(null),g(!1),p.current=null,!y){I(!0),S(!1);return}return(async()=>{try{const k=await(x?x.getFile(s,()=>m(s)):m(s));l||P(k)}catch{l||(I(!0),P(null))}finally{l||S(!1)}})(),()=>{l=!0}},[s,x,m,y]);const F=t.useCallback(l=>{p.current=l,g(!0),N?.(l)},[N]);return t.useEffect(()=>{const l=b??[],v=p.current?.getThumbnailsDataUrl;if(!l.length||!v||!T||!h||!u)return;let k=!1;return(async()=>{const K=new Map;for(let A=0;A<l.length&&!k;A+=q){const se=l.slice(A,A+q);try{const $=await v(se,X);if(k)break;$.forEach((re,ne)=>K.set(ne,re)),h(new Map(K))}catch($){console.warn("Thumbnail batch load failed:",$);break}}})(),()=>{k=!0}},[b,T,h,u]),{file:T,isLoading:R,isError:D,isSupportedFile:y,activeHighlightIndex:w,zoom:a,setZoom:d,zoomSelectOptions:C,viewerApiRef:p,showLoader:!D&&(!!R||i),changeIndex:_,handleZoomChange:M,handleViewerReady:F}},ie=({fileUrl:s,fileName:r,errorLabel:m,occurrencesLabel:n,unsupportedLabel:f,highlights:o,loadFileCb:b,showOccurrences:h=!0,selectedPageNumber:N,containerClassName:i,pdfViewerClassName:j,onTotalPagesChange:x,title:p,thumbnailPageNumbers:u,onThumbnailsLoaded:g,onViewerReady:w,onCurrentPageChange:O,showLoaderOverlay:D=!1,selectedPages:I,selectedHighlightId:R,viewerOptions:S})=>{const{file:T,isError:P,isSupportedFile:a,activeHighlightIndex:d,zoom:y,setZoom:_,zoomSelectOptions:M,showLoader:C,changeIndex:F,handleZoomChange:H,handleViewerReady:l}=ae({fileUrl:s,fileName:r,loadFileCb:b,highlights:o,selectedPageNumber:N,onTotalPagesChange:x,thumbnailPageNumbers:u,onThumbnailsLoaded:g,onViewerReady:w,showLoaderOverlay:D,selectedPages:I});return e.jsxs("div",{className:c.mergeClasses("flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-sunken",i),children:[r&&e.jsx("div",{className:"shrink-0 min-h-0 w-full",children:e.jsx(c.EllipsisTooltip,{className:"dial-tiny-text text-secondary",text:r})}),e.jsxs("div",{className:c.mergeClasses("flex w-full justify-between items-center",h&&p?"gap-2":""),children:[e.jsx("div",{children:h?e.jsxs("div",{className:"flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-raised rounded w-fit",children:[e.jsxs("span",{className:"dial-small-text",children:[n??"Occurrences",":",e.jsx("span",{className:"pl-0.5 min-w-3 inline-block text-right",children:o.length>0?`${d+1}/${o.length}`:"0"})]}),o.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(c.IconButton,{className:"p-0 text-primary !h-6.5",size:c.ElementSize.Small,icon:e.jsx(z.IconChevronDown,{size:16}),"aria-label":"Next occurrence",onClick:()=>F(1)}),e.jsx(c.IconButton,{className:"p-0 text-primary !h-6.5",size:c.ElementSize.Small,icon:e.jsx(z.IconChevronUp,{size:16}),"aria-label":"Previous occurrence",onClick:()=>F(-1)})]})]}):e.jsx("div",{})}),e.jsxs("div",{className:c.mergeClasses("flex flex-1 items-center gap-4 min-w-0",p!=null&&p!==""?"justify-between":"justify-end"),children:[p!=null&&p!==""&&e.jsx(c.EllipsisTooltip,{text:p,className:"dial-body-semi-text text-primary min-w-0"}),e.jsxs("div",{className:"flex gap-0.5 items-center shrink-0",children:[e.jsx("div",{className:"h-6",children:e.jsx(c.Select,{size:c.ElementSize.Small,ariaLabel:"Zoom",fieldClassName:"bg-control-neutral !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-accent-alpha rounded",options:M,value:y,onChange:v=>_(v)})}),e.jsx(c.IconButton,{className:"py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",icon:e.jsx(z.IconMinus,{size:16}),"aria-label":"Zoom out",size:c.ElementSize.Small,onClick:()=>H(-1)}),e.jsx(c.IconButton,{className:"py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",icon:e.jsx(z.IconPlus,{size:16}),"aria-label":"Zoom in",size:c.ElementSize.Small,onClick:()=>H(1)})]})]})]}),e.jsxs("div",{className:"relative flex min-h-0 flex-1",children:[T&&e.jsx(Y,{pdf:T,highlights:o,selectedHighlightId:h?o[d]?.id:R,selectedPageNumber:N,zoom:y,onTotalPagesChange:x,onViewerReady:l,onCurrentPageChange:O,containerClassName:j,selectedPages:I,viewerOptions:S}),C&&e.jsx(J,{className:"absolute inset-0 z-10"}),P&&e.jsx("div",{className:"absolute inset-0 z-20 flex items-center justify-center bg-layer-raised",children:e.jsxs("div",{className:"flex flex-col items-center gap-6 p-10",children:[e.jsx(z.IconAlertTriangle,{size:60,stroke:2,className:"text-secondary"}),e.jsx("div",{className:"text-center dial-small-text whitespace-pre-wrap",children:!a&&f?f:m??"Failed to load document."})]})})]})]})},ue=1200*1e3,de=20,me=({children:s,ttlMs:r=ue,maxEntries:m=de})=>{const n=t.useRef(new Map),f=t.useCallback((i,j)=>{n.current.delete(i),n.current.set(i,j)},[]),o=t.useCallback(()=>{const i=Date.now();for(const[j,x]of n.current.entries())x.file&&i-x.timestamp>r&&n.current.delete(j)},[r]),b=t.useCallback(()=>{for(;n.current.size>m;){const i=n.current.keys().next().value;i&&n.current.delete(i)}},[m]),h=t.useCallback(()=>{n.current.clear()},[]),N=t.useCallback(async(i,j)=>{o();const x=n.current.get(i);if(x){if(f(i,{...x,timestamp:Date.now()}),x.file)return x.file;if(x.promise)return x.promise}const p=Date.now(),u=j().then(w=>{const O={file:w,timestamp:Date.now()};return f(i,O),b(),w}).catch(w=>{throw n.current.delete(i),w});return f(i,{promise:u,timestamp:p}),b(),u},[b,o,f]);return t.useEffect(()=>()=>h(),[h]),e.jsx(Q.Provider,{value:{getFile:N,clearCache:h},children:s})},fe=({pageNum:s,onSelectPage:r,isSelected:m,isLoading:n,isMultiselect:f,thumbnailUrl:o,className:b})=>e.jsxs("button",{type:"button","aria-label":`Page ${s}`,"aria-pressed":m,onClick:h=>{f&&h.target.closest("[data-checkbox-wrapper]")||r(s)},className:c.mergeClasses("flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-control-accent-alpha-hover rounded-sm",m&&(f?"border border-accent bg-control-accent-alpha":"border border-primary"),b),children:[e.jsxs("div",{className:"relative w-[104px] h-[146px] bg-layer-raised rounded-sm overflow-hidden",children:[o?e.jsx("img",{src:o,alt:`Page ${s} thumbnail`,className:"w-full h-full object-cover rounded-sm"}):null,f&&e.jsx("div",{className:"absolute left-1 top-1 z-10","data-checkbox-wrapper":!0,children:e.jsx(c.Checkbox,{id:`page-thumbnail-${s}`,isSelected:m,onChange:()=>r(s),"aria-label":`Select page ${s}`})}),n&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-backdrop rounded-sm",children:e.jsx(c.Spinner,{size:24,fullWidth:!1,ariaLabel:`Loading page ${s}`})})]}),e.jsx("span",{className:"dial-tiny-text text-primary",children:s})]});Object.defineProperty(exports,"RotationDirection",{enumerable:!0,get:()=>V.RotationDirection});exports.AUTO_ZOOM_ID=L;exports.DocumentPreview=ie;exports.DocumentPreviewCacheProvider=me;exports.FIT_ZOOM_ID=B;exports.PDFViewer=Y;exports.PageThumbnail=fe;exports.PdfPreviewLoader=J;exports.THUMBNAIL_BATCH_SIZE=q;exports.THUMBNAIL_IMAGE_OPTIONS=X;exports.ZOOM_OPTIONS=U;exports.getStepZoomOptionValue=te;exports.isPdfFile=G;exports.useDocumentPreview=ae;exports.useDocumentPreviewCache=ee;

package/dist/ai-dial-react-pdf-highlighter.es.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as x, Fragment as se } from "react/jsx-runtime";
-import { mergeClasses as S, EllipsisTooltip as Y, IconButton as B, ElementSize as M, Select as ce, Checkbox as ie, Spinner as ue } from "@epam/ai-dial-ui-kit";
+import { jsx as e, jsxs as g, Fragment as se } from "react/jsx-runtime";
+import { mergeClasses as L, EllipsisTooltip as Y, IconButton as U, ElementSize as V, Select as ce, Checkbox as ie, Spinner as ue } from "@epam/ai-dial-ui-kit";
 import { ZoomMode as J, PDFHighlightViewer as de } from "@epam/pdf-highlighter-kit";
 import { RotationDirection as je } from "@epam/pdf-highlighter-kit";
-import { useRef as F, useState as Z, useEffect as y, useCallback as I, createContext as me, useContext as fe, useMemo as Q } from "react";
-import { IconChevronDown as pe, IconChevronUp as he, IconMinus as ve, IconPlus as be, IconAlertTriangle as xe } from "@tabler/icons-react";
-const $ = "auto", G = "page-fit", X = [
-  { value: $, label: "Auto" },
-  { value: G, label: "Page Fit" },
+import { useRef as S, useState as k, useEffect as y, useCallback as O, createContext as me, useContext as fe, useMemo as Q } from "react";
+import { IconChevronDown as pe, IconChevronUp as he, IconMinus as ve, IconPlus as be, IconAlertTriangle as ge } from "@tabler/icons-react";
+const H = "auto", X = "page-fit", q = [
+  { value: H, label: "Auto" },
+  { value: X, label: "Page Fit" },
   { value: "0.5", label: "50%" },
   { value: "0.75", label: "75%" },
   { value: "1", label: "100%" },
@@ -14,107 +14,119 @@ const $ = "auto", G = "page-fit", X = [
   { value: "1.5", label: "150%" },
   { value: "2", label: "200%" },
   { value: "3", label: "300%" }
-], ge = {
+], xe = {
   maxWidth: 104,
   format: "image/jpeg",
   quality: 0.85
 }, ee = 15, we = "application/pdf", ye = ".pdf", Ne = ({
-  pdf: t,
+  pdf: a,
   highlights: r,
-  selectedHighlightId: c,
-  autoFocusFirstHighlight: o = !1,
-  selectedPageNumber: i,
-  zoom: s,
+  selectedHighlightId: u,
+  autoFocusFirstHighlight: n = !1,
+  selectedPageNumber: d,
+  zoom: l,
   containerClassName: v,
-  onTotalPagesChange: h,
+  onTotalPagesChange: p,
   onViewerReady: N,
-  selectedPages: u,
-  viewerOptions: w
+  onCurrentPageChange: s,
+  selectedPages: C,
+  viewerOptions: m
 }) => {
-  const d = F(null), n = F(null), [p, _] = Z(!1), [g, E] = Z(!1), O = F(h), D = F(N), k = F(w);
+  const f = S(null), c = S(null), [b, x] = k(!1), [D, R] = k(!1), E = S(p), F = S(N), z = S(s), _ = S(m);
   y(() => {
-    O.current = h;
-  }, [h]), y(() => {
-    D.current = N;
+    E.current = p;
+  }, [p]), y(() => {
+    F.current = N;
   }, [N]), y(() => {
-    k.current = w;
-  }, [w]);
-  const C = I(
-    (a) => n.current?.goToHighlight(a),
+    z.current = s;
+  }, [s]), y(() => {
+    _.current = m;
+  }, [m]);
+  const T = O(
+    (t) => c.current?.goToHighlight(t),
     []
   );
   return y(() => {
-    if (!d.current) return;
-    _(!1), E(!1), n.current && (n.current.destroy(), n.current = null);
-    let a = null, m = !0;
-    const f = () => {
-      m && E(!0);
+    if (!f.current) return;
+    x(!1), R(!1), c.current && (c.current.destroy(), c.current = null);
+    let t = null, i = !0;
+    const w = () => {
+      i && R(!0);
+    }, Z = (P) => {
+      i && z.current?.(P.currentPage);
     };
     return (async () => {
       try {
-        if (a = new de(), await a.init(d.current, {
+        if (t = new de(), await t.init(f.current, {
           enableTextSelection: !0,
           enableVirtualScrolling: !0,
           bboxOrigin: "top-left",
-          ...k.current
-        }), !m) {
-          a.destroy();
+          ..._.current
+        }), !i) {
+          t.destroy();
           return;
         }
-        if (a.addEventListener("zoomChanged", f), await a.loadPDF(t, { selectedPages: u }), !m) {
-          a.destroy();
+        if (t.addEventListener("zoomChanged", w), t.addEventListener(
+          "pageChanged",
+          Z
+        ), await t.loadPDF(a, { selectedPages: C }), !i) {
+          t.destroy();
           return;
         }
-        const P = a.getTotalPages?.();
-        typeof P == "number" && P > 0 && O.current?.(P), m && (n.current = a, _(!0));
+        const P = t.getTotalPages?.();
+        typeof P == "number" && P > 0 && E.current?.(P), i && (c.current = t, x(!0));
       } catch (P) {
-        if (!m)
+        if (!i)
           return;
         console.error("Error in initViewer:", P);
       }
     })(), () => {
-      m = !1, a && (a.removeEventListener("zoomChanged", f), a.destroy());
+      i = !1, t && (t.removeEventListener("zoomChanged", w), t.removeEventListener(
+        "pageChanged",
+        Z
+      ), t.destroy());
     };
-  }, [t, u]), y(() => {
-    !p || !n.current || (n.current.loadHighlights(r), o && r && r[0] && C(r[0].id));
-  }, [o, C, r, p]), y(() => {
-    p && g && c && C(c);
-  }, [C, p, g, c]), y(() => {
-    if (!(!p || !s))
-      if (s === $)
-        n.current?.setZoom?.(J.AUTO);
-      else if (s === G)
-        n.current?.setZoom?.(J.PAGE_FIT);
+  }, [a, C]), y(() => {
+    !b || !c.current || (c.current.loadHighlights(r), n && r && r[0] && T(r[0].id));
+  }, [n, T, r, b]), y(() => {
+    b && D && u && T(u);
+  }, [T, b, D, u]), y(() => {
+    if (!(!b || !l))
+      if (l === H)
+        c.current?.setZoom?.(J.AUTO);
+      else if (l === X)
+        c.current?.setZoom?.(J.PAGE_FIT);
       else {
-        const a = parseFloat(s);
-        !Number.isNaN(a) && a > 0 && n.current?.setZoom?.(a);
+        const t = parseFloat(l);
+        !Number.isNaN(t) && t > 0 && c.current?.setZoom?.(t);
       }
-  }, [p, s]), y(() => {
-    p && i && n.current?.setPage?.(i);
-  }, [p, i]), y(() => {
-    if (!p || !n.current) return;
-    const a = n.current;
-    D.current?.({
-      getThumbnailsDataUrl: (m, f) => a.getThumbnailsDataUrl(m, f),
-      zoomIn: () => a.zoomIn(),
-      zoomOut: () => a.zoomOut(),
-      getZoom: () => a.getZoom(),
-      navigateToPage: (m) => a.setPage?.(m),
-      setPageDisplayRotation: (m, f, z) => a.setPageDisplayRotation(m, f, z),
-      getPageDisplayRotation: (m) => a.getPageDisplayRotation(m)
+  }, [b, l]), y(() => {
+    b && d && c.current?.setPage?.(d);
+  }, [b, d]), y(() => {
+    if (!b || !c.current) return;
+    const t = c.current;
+    F.current?.({
+      getThumbnailsDataUrl: (i, w) => t.getThumbnailsDataUrl(i, w),
+      zoomIn: () => t.zoomIn(),
+      zoomOut: () => t.zoomOut(),
+      getZoom: () => t.getZoom(),
+      getCurrentPage: () => t.getCurrentPage(),
+      navigateToPage: (i) => t.setPage?.(i),
+      setPageDisplayRotation: (i, w, Z) => t.setPageDisplayRotation(i, w, Z),
+      getPageDisplayRotation: (i) => t.getPageDisplayRotation(i)
     });
-  }, [p]), /* @__PURE__ */ e(
+  }, [b]), /* @__PURE__ */ e(
     "div",
     {
-      ref: d,
-      className: S(
+      ref: f,
+      className: L(
         "grow min-w-0 overflow-auto bg-layer-raised",
         v
       )
     }
   );
-}, T = "h-4 rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave", Ce = ({
-  className: t,
+}, I = "h-4 rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave", Ce = ({
+  className: a,
   ariaLabel: r = "pdf preview loading"
 }) => /* @__PURE__ */ e(
   "div",
@@ -122,34 +134,34 @@ const $ = "auto", G = "page-fit", X = [
     role: "status",
     "aria-label": r,
     "aria-live": "polite",
-    className: S("h-full w-full bg-layer-raised", t),
-    children: /* @__PURE__ */ x("div", { className: "flex h-full w-full flex-col gap-10 px-[60px] pt-10", children: [
+    className: L("h-full w-full bg-layer-raised", a),
+    children: /* @__PURE__ */ g("div", { className: "flex h-full w-full flex-col gap-10 px-[60px] pt-10", children: [
       /* @__PURE__ */ e("div", { className: "mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-sunken via-layer-raised to-layer-sunken bg-[length:200%_100%] animate-skeleton-wave" }),
-      /* @__PURE__ */ x("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e("div", { className: T }),
-        /* @__PURE__ */ e("div", { className: T }),
-        /* @__PURE__ */ e("div", { className: T }),
-        /* @__PURE__ */ e("div", { className: T }),
+      /* @__PURE__ */ g("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e("div", { className: I }),
+        /* @__PURE__ */ e("div", { className: I }),
+        /* @__PURE__ */ e("div", { className: I }),
+        /* @__PURE__ */ e("div", { className: I }),
         /* @__PURE__ */ e(
           "div",
           {
-            className: S(
-              T,
+            className: L(
+              I,
               "w-[28%] max-w-[320px]"
             )
           }
         )
       ] }),
-      /* @__PURE__ */ x("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ e("div", { className: T }),
-        /* @__PURE__ */ e("div", { className: T }),
-        /* @__PURE__ */ e("div", { className: T }),
-        /* @__PURE__ */ e("div", { className: T }),
+      /* @__PURE__ */ g("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e("div", { className: I }),
+        /* @__PURE__ */ e("div", { className: I }),
+        /* @__PURE__ */ e("div", { className: I }),
+        /* @__PURE__ */ e("div", { className: I }),
         /* @__PURE__ */ e(
           "div",
           {
-            className: S(
-              T,
+            className: L(
+              I,
               "w-[58%] max-w-[520px]"
             )
           }
@@ -157,188 +169,189 @@ const $ = "auto", G = "page-fit", X = [
       ] })
     ] })
   }
-), re = me(null), Pe = () => fe(re), R = X.filter(({ value: t }) => {
-  const r = Number.parseFloat(t);
+), re = me(null), Pe = () => fe(re), M = q.filter(({ value: a }) => {
+  const r = Number.parseFloat(a);
   return !Number.isNaN(r) && r > 0;
-}), Te = [...R].reverse(), Ie = (t, r, c) => {
-  if (R.length === 0)
-    return t;
-  const o = Number.parseFloat(t), i = !Number.isNaN(o) && o > 0 ? o : c, s = typeof i == "number" && i > 0 ? i : Number.parseFloat(R[0].value);
-  return r === 1 ? (R.find(
-    ({ value: v }) => Number.parseFloat(v) > s
-  ) ?? R[R.length - 1]).value : (Te.find(
-    ({ value: v }) => Number.parseFloat(v) < s
-  ) ?? R[0]).value;
+}), Te = [...M].reverse(), Ie = (a, r, u) => {
+  if (M.length === 0)
+    return a;
+  const n = Number.parseFloat(a), d = !Number.isNaN(n) && n > 0 ? n : u, l = typeof d == "number" && d > 0 ? d : Number.parseFloat(M[0].value);
+  return r === 1 ? (M.find(
+    ({ value: v }) => Number.parseFloat(v) > l
+  ) ?? M[M.length - 1]).value : (Te.find(
+    ({ value: v }) => Number.parseFloat(v) < l
+  ) ?? M[0]).value;
 };
-function te(t, r) {
-  const c = (t ?? "").toLowerCase();
-  return (r ?? "").toLowerCase() === we || c.endsWith(ye);
+function te(a, r) {
+  const u = (a ?? "").toLowerCase();
+  return (r ?? "").toLowerCase() === we || u.endsWith(ye);
 }
-const ae = X.map((t) => ({
-  value: t.value,
-  label: t.label
-})), _e = ({
-  fileUrl: t,
+const ae = q.map((a) => ({
+  value: a.value,
+  label: a.label
+})), Ee = ({
+  fileUrl: a,
   fileName: r,
-  loadFileCb: c,
-  highlights: o,
-  selectedPageNumber: i,
-  onTotalPagesChange: s,
+  loadFileCb: u,
+  highlights: n,
+  selectedPageNumber: d,
+  onTotalPagesChange: l,
   thumbnailPageNumbers: v,
-  onThumbnailsLoaded: h,
+  onThumbnailsLoaded: p,
   onViewerReady: N,
-  showLoaderOverlay: u = !1,
-  selectedPages: w
+  showLoaderOverlay: s = !1,
+  selectedPages: C
 }) => {
-  const d = Pe(), n = F(null), [p, _] = Z(!1), [g, E] = Z(0), [O, D] = Z(!1), [k, C] = Z(null), [a, m] = Z(null), [f, z] = Z($), P = Q(() => {
+  const m = Pe(), f = S(null), [c, b] = k(!1), [x, D] = k(0), [R, E] = k(!1), [F, z] = k(null), [_, T] = k(null), [t, i] = k(H), w = Q(() => {
     if (r)
       return te(r.toLowerCase());
-    let l;
+    let o;
     try {
-      l = new URL(t).pathname;
+      o = new URL(a).pathname;
     } catch {
-      l = t.split("?")[0].split("#")[0];
+      o = a.split("?")[0].split("#")[0];
     }
-    const b = l.split("/").pop() ?? "";
-    return !b.includes(".") || te(b.toLowerCase());
-  }, [r, t]), U = I(
-    (l) => {
-      E(
-        (g + l + o.length) % o.length
+    const h = o.split("/").pop() ?? "";
+    return !h.includes(".") || te(h.toLowerCase());
+  }, [r, a]), Z = O(
+    (o) => {
+      D(
+        (x + o + n.length) % n.length
       );
     },
-    [g, o.length]
-  ), H = I(
-    (l) => {
-      const b = n.current;
-      !b?.getZoom || !l || z(Ie(f, l, b.getZoom()));
+    [x, n.length]
+  ), j = O(
+    (o) => {
+      const h = f.current;
+      !h?.getZoom || !o || i(Ie(t, o, h.getZoom()));
     },
-    [f]
-  ), A = Q(() => {
-    if (!(f === $ || f === G || X.some((b) => b.value === f))) {
-      const b = parseFloat(f);
-      if (!Number.isNaN(b) && b > 0)
+    [t]
+  ), P = Q(() => {
+    if (!(t === H || t === X || q.some((h) => h.value === t))) {
+      const h = parseFloat(t);
+      if (!Number.isNaN(h) && h > 0)
         return [
           ...ae,
-          { value: f, label: `${Math.round(b * 100)}%` }
+          { value: t, label: `${Math.round(h * 100)}%` }
         ];
     }
     return ae;
-  }, [f]);
+  }, [t]);
   y(() => {
-    let l = !1;
-    if (C(!0), D(!1), m(null), _(!1), n.current = null, !P) {
-      D(!0), C(!1);
+    let o = !1;
+    if (z(!0), E(!1), T(null), b(!1), f.current = null, !w) {
+      E(!0), z(!1);
       return;
     }
     return (async () => {
       try {
-        const L = await (d ? d.getFile(t, () => c(t)) : c(t));
-        l || m(L);
+        const A = await (m ? m.getFile(a, () => u(a)) : u(a));
+        o || T(A);
       } catch {
-        l || (D(!0), m(null));
+        o || (E(!0), T(null));
       } finally {
-        l || C(!1);
+        o || z(!1);
       }
     })(), () => {
-      l = !0;
+      o = !0;
     };
-  }, [t, d, c, P]);
-  const V = I(
-    (l) => {
-      n.current = l, _(!0), N?.(l);
+  }, [a, m, u, w]);
+  const B = O(
+    (o) => {
+      f.current = o, b(!0), N?.(o);
     },
     [N]
   );
   return y(() => {
-    const l = v ?? [], b = n.current?.getThumbnailsDataUrl;
-    if (!l.length || !b || !a || !h || !p)
+    const o = v ?? [], h = f.current?.getThumbnailsDataUrl;
+    if (!o.length || !h || !_ || !p || !c)
       return;
-    let L = !1;
+    let A = !1;
     return (async () => {
       const K = /* @__PURE__ */ new Map();
-      for (let j = 0; j < l.length && !L; j += ee) {
-        const ne = l.slice(j, j + ee);
+      for (let $ = 0; $ < o.length && !A; $ += ee) {
+        const ne = o.slice($, $ + ee);
         try {
-          const W = await b(ne, ge);
-          if (L) break;
-          W.forEach((oe, le) => K.set(le, oe)), h(new Map(K));
-        } catch (W) {
-          console.warn("Thumbnail batch load failed:", W);
+          const G = await h(ne, xe);
+          if (A) break;
+          G.forEach((oe, le) => K.set(le, oe)), p(new Map(K));
+        } catch (G) {
+          console.warn("Thumbnail batch load failed:", G);
           break;
         }
       }
     })(), () => {
-      L = !0;
+      A = !0;
     };
-  }, [v, a, h, p]), {
-    file: a,
-    isLoading: k,
-    isError: O,
-    isSupportedFile: P,
-    activeHighlightIndex: g,
-    zoom: f,
-    setZoom: z,
-    zoomSelectOptions: A,
-    viewerApiRef: n,
-    showLoader: !O && (!!k || u),
-    changeIndex: U,
-    handleZoomChange: H,
-    handleViewerReady: V
+  }, [v, _, p, c]), {
+    file: _,
+    isLoading: F,
+    isError: R,
+    isSupportedFile: w,
+    activeHighlightIndex: x,
+    zoom: t,
+    setZoom: i,
+    zoomSelectOptions: P,
+    viewerApiRef: f,
+    showLoader: !R && (!!F || s),
+    changeIndex: Z,
+    handleZoomChange: j,
+    handleViewerReady: B
   };
-}, Fe = ({
-  fileUrl: t,
+}, Re = ({
+  fileUrl: a,
   fileName: r,
-  errorLabel: c,
-  occurrencesLabel: o,
-  unsupportedLabel: i,
-  highlights: s,
+  errorLabel: u,
+  occurrencesLabel: n,
+  unsupportedLabel: d,
+  highlights: l,
   loadFileCb: v,
-  showOccurrences: h = !0,
+  showOccurrences: p = !0,
   selectedPageNumber: N,
-  containerClassName: u,
-  pdfViewerClassName: w,
-  onTotalPagesChange: d,
-  title: n,
-  thumbnailPageNumbers: p,
-  onThumbnailsLoaded: _,
-  onViewerReady: g,
-  showLoaderOverlay: E = !1,
-  selectedPages: O,
-  selectedHighlightId: D,
-  viewerOptions: k
+  containerClassName: s,
+  pdfViewerClassName: C,
+  onTotalPagesChange: m,
+  title: f,
+  thumbnailPageNumbers: c,
+  onThumbnailsLoaded: b,
+  onViewerReady: x,
+  onCurrentPageChange: D,
+  showLoaderOverlay: R = !1,
+  selectedPages: E,
+  selectedHighlightId: F,
+  viewerOptions: z
 }) => {
   const {
-    file: C,
-    isError: a,
-    isSupportedFile: m,
-    activeHighlightIndex: f,
-    zoom: z,
-    setZoom: P,
-    zoomSelectOptions: U,
-    showLoader: H,
-    changeIndex: A,
-    handleZoomChange: V,
-    handleViewerReady: q
-  } = _e({
-    fileUrl: t,
+    file: _,
+    isError: T,
+    isSupportedFile: t,
+    activeHighlightIndex: i,
+    zoom: w,
+    setZoom: Z,
+    zoomSelectOptions: j,
+    showLoader: P,
+    changeIndex: B,
+    handleZoomChange: W,
+    handleViewerReady: o
+  } = Ee({
+    fileUrl: a,
     fileName: r,
     loadFileCb: v,
-    highlights: s,
+    highlights: l,
     selectedPageNumber: N,
-    onTotalPagesChange: d,
-    thumbnailPageNumbers: p,
-    onThumbnailsLoaded: _,
-    onViewerReady: g,
-    showLoaderOverlay: E,
-    selectedPages: O
+    onTotalPagesChange: m,
+    thumbnailPageNumbers: c,
+    onThumbnailsLoaded: b,
+    onViewerReady: x,
+    showLoaderOverlay: R,
+    selectedPages: E
   });
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: S(
+      className: L(
         "flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-sunken",
-        u
+        s
       ),
       children: [
         r && /* @__PURE__ */ e("div", { className: "shrink-0 min-h-0 w-full", children: /* @__PURE__ */ e(
@@ -348,88 +361,88 @@ const ae = X.map((t) => ({
             text: r
           }
         ) }),
-        /* @__PURE__ */ x(
+        /* @__PURE__ */ g(
           "div",
           {
-            className: S(
+            className: L(
               "flex w-full justify-between items-center",
-              h && n ? "gap-2" : ""
+              p && f ? "gap-2" : ""
             ),
             children: [
-              /* @__PURE__ */ e("div", { children: h ? /* @__PURE__ */ x("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-raised rounded w-fit", children: [
-                /* @__PURE__ */ x("span", { className: "dial-small-text", children: [
-                  o ?? "Occurrences",
+              /* @__PURE__ */ e("div", { children: p ? /* @__PURE__ */ g("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-raised rounded w-fit", children: [
+                /* @__PURE__ */ g("span", { className: "dial-small-text", children: [
+                  n ?? "Occurrences",
                   ":",
-                  /* @__PURE__ */ e("span", { className: "pl-0.5 min-w-3 inline-block text-right", children: s.length > 0 ? `${f + 1}/${s.length}` : "0" })
+                  /* @__PURE__ */ e("span", { className: "pl-0.5 min-w-3 inline-block text-right", children: l.length > 0 ? `${i + 1}/${l.length}` : "0" })
                 ] }),
-                s.length > 0 && /* @__PURE__ */ x(se, { children: [
+                l.length > 0 && /* @__PURE__ */ g(se, { children: [
                   /* @__PURE__ */ e(
-                    B,
+                    U,
                     {
                       className: "p-0 text-primary !h-6.5",
-                      size: M.Small,
+                      size: V.Small,
                       icon: /* @__PURE__ */ e(pe, { size: 16 }),
                       "aria-label": "Next occurrence",
-                      onClick: () => A(1)
+                      onClick: () => B(1)
                     }
                   ),
                   /* @__PURE__ */ e(
-                    B,
+                    U,
                     {
                       className: "p-0 text-primary !h-6.5",
-                      size: M.Small,
+                      size: V.Small,
                       icon: /* @__PURE__ */ e(he, { size: 16 }),
                       "aria-label": "Previous occurrence",
-                      onClick: () => A(-1)
+                      onClick: () => B(-1)
                     }
                   )
                 ] })
               ] }) : /* @__PURE__ */ e("div", {}) }),
-              /* @__PURE__ */ x(
+              /* @__PURE__ */ g(
                 "div",
                 {
-                  className: S(
+                  className: L(
                     "flex flex-1 items-center gap-4 min-w-0",
-                    n != null && n !== "" ? "justify-between" : "justify-end"
+                    f != null && f !== "" ? "justify-between" : "justify-end"
                   ),
                   children: [
-                    n != null && n !== "" && /* @__PURE__ */ e(
+                    f != null && f !== "" && /* @__PURE__ */ e(
                       Y,
                       {
-                        text: n,
+                        text: f,
                         className: "dial-body-semi-text text-primary min-w-0"
                       }
                     ),
-                    /* @__PURE__ */ x("div", { className: "flex gap-0.5 items-center shrink-0", children: [
+                    /* @__PURE__ */ g("div", { className: "flex gap-0.5 items-center shrink-0", children: [
                       /* @__PURE__ */ e("div", { className: "h-6", children: /* @__PURE__ */ e(
                         ce,
                         {
-                          size: M.Small,
+                          size: V.Small,
                           ariaLabel: "Zoom",
                           fieldClassName: "bg-control-neutral !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-accent-alpha rounded",
-                          options: U,
-                          value: z,
-                          onChange: (l) => P(l)
+                          options: j,
+                          value: w,
+                          onChange: (h) => Z(h)
                         }
                       ) }),
                       /* @__PURE__ */ e(
-                        B,
+                        U,
                         {
                           className: "py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",
                           icon: /* @__PURE__ */ e(ve, { size: 16 }),
                           "aria-label": "Zoom out",
-                          size: M.Small,
-                          onClick: () => V(-1)
+                          size: V.Small,
+                          onClick: () => W(-1)
                         }
                       ),
                       /* @__PURE__ */ e(
-                        B,
+                        U,
                         {
                           className: "py-0 rounded text-primary bg-control-neutral border border-transparent hover:border-accent-alpha",
                           icon: /* @__PURE__ */ e(be, { size: 16 }),
                           "aria-label": "Zoom in",
-                          size: M.Small,
-                          onClick: () => V(1)
+                          size: V.Small,
+                          onClick: () => W(1)
                         }
                       )
                     ] })
@@ -439,145 +452,146 @@ const ae = X.map((t) => ({
             ]
           }
         ),
-        /* @__PURE__ */ x("div", { className: "relative flex min-h-0 flex-1", children: [
-          C && /* @__PURE__ */ e(
+        /* @__PURE__ */ g("div", { className: "relative flex min-h-0 flex-1", children: [
+          _ && /* @__PURE__ */ e(
             Ne,
             {
-              pdf: C,
-              highlights: s,
-              selectedHighlightId: h ? s[f]?.id : D,
+              pdf: _,
+              highlights: l,
+              selectedHighlightId: p ? l[i]?.id : F,
               selectedPageNumber: N,
-              zoom: z,
-              onTotalPagesChange: d,
-              onViewerReady: q,
-              containerClassName: w,
-              selectedPages: O,
-              viewerOptions: k
+              zoom: w,
+              onTotalPagesChange: m,
+              onViewerReady: o,
+              onCurrentPageChange: D,
+              containerClassName: C,
+              selectedPages: E,
+              viewerOptions: z
             }
           ),
-          H && /* @__PURE__ */ e(Ce, { className: "absolute inset-0 z-10" }),
-          a && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-layer-raised", children: /* @__PURE__ */ x("div", { className: "flex flex-col items-center gap-6 p-10", children: [
+          P && /* @__PURE__ */ e(Ce, { className: "absolute inset-0 z-10" }),
+          T && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-layer-raised", children: /* @__PURE__ */ g("div", { className: "flex flex-col items-center gap-6 p-10", children: [
             /* @__PURE__ */ e(
-              xe,
+              ge,
               {
                 size: 60,
                 stroke: 2,
                 className: "text-secondary"
               }
             ),
-            /* @__PURE__ */ e("div", { className: "text-center dial-small-text whitespace-pre-wrap", children: !m && i ? i : c ?? "Failed to load document." })
+            /* @__PURE__ */ e("div", { className: "text-center dial-small-text whitespace-pre-wrap", children: !t && d ? d : u ?? "Failed to load document." })
           ] }) })
         ] })
       ]
     }
   );
-}, Ee = 1200 * 1e3, Oe = 20, Le = ({
-  children: t,
-  ttlMs: r = Ee,
-  maxEntries: c = Oe
+}, _e = 1200 * 1e3, Oe = 20, Fe = ({
+  children: a,
+  ttlMs: r = _e,
+  maxEntries: u = Oe
 }) => {
-  const o = F(/* @__PURE__ */ new Map()), i = I((u, w) => {
-    o.current.delete(u), o.current.set(u, w);
-  }, []), s = I(() => {
-    const u = Date.now();
-    for (const [w, d] of o.current.entries())
-      d.file && u - d.timestamp > r && o.current.delete(w);
-  }, [r]), v = I(() => {
-    for (; o.current.size > c; ) {
-      const u = o.current.keys().next().value;
-      u && o.current.delete(u);
+  const n = S(/* @__PURE__ */ new Map()), d = O((s, C) => {
+    n.current.delete(s), n.current.set(s, C);
+  }, []), l = O(() => {
+    const s = Date.now();
+    for (const [C, m] of n.current.entries())
+      m.file && s - m.timestamp > r && n.current.delete(C);
+  }, [r]), v = O(() => {
+    for (; n.current.size > u; ) {
+      const s = n.current.keys().next().value;
+      s && n.current.delete(s);
     }
-  }, [c]), h = I(() => {
-    o.current.clear();
-  }, []), N = I(
-    async (u, w) => {
-      s();
-      const d = o.current.get(u);
-      if (d) {
-        if (i(u, { ...d, timestamp: Date.now() }), d.file)
-          return d.file;
-        if (d.promise)
-          return d.promise;
+  }, [u]), p = O(() => {
+    n.current.clear();
+  }, []), N = O(
+    async (s, C) => {
+      l();
+      const m = n.current.get(s);
+      if (m) {
+        if (d(s, { ...m, timestamp: Date.now() }), m.file)
+          return m.file;
+        if (m.promise)
+          return m.promise;
       }
-      const n = Date.now(), p = w().then((g) => {
-        const E = { file: g, timestamp: Date.now() };
-        return i(u, E), v(), g;
-      }).catch((g) => {
-        throw o.current.delete(u), g;
+      const f = Date.now(), c = C().then((x) => {
+        const D = { file: x, timestamp: Date.now() };
+        return d(s, D), v(), x;
+      }).catch((x) => {
+        throw n.current.delete(s), x;
       });
-      return i(u, { promise: p, timestamp: n }), v(), p;
+      return d(s, { promise: c, timestamp: f }), v(), c;
     },
-    [v, s, i]
+    [v, l, d]
   );
-  return y(() => () => h(), [h]), /* @__PURE__ */ e(re.Provider, { value: { getFile: N, clearCache: h }, children: t });
+  return y(() => () => p(), [p]), /* @__PURE__ */ e(re.Provider, { value: { getFile: N, clearCache: p }, children: a });
 }, Me = ({
-  pageNum: t,
+  pageNum: a,
   onSelectPage: r,
-  isSelected: c,
-  isLoading: o,
-  isMultiselect: i,
-  thumbnailUrl: s,
+  isSelected: u,
+  isLoading: n,
+  isMultiselect: d,
+  thumbnailUrl: l,
   className: v
-}) => /* @__PURE__ */ x(
+}) => /* @__PURE__ */ g(
   "button",
   {
     type: "button",
-    "aria-label": `Page ${t}`,
-    "aria-pressed": c,
-    onClick: (h) => {
-      i && h.target.closest("[data-checkbox-wrapper]") || r(t);
+    "aria-label": `Page ${a}`,
+    "aria-pressed": u,
+    onClick: (p) => {
+      d && p.target.closest("[data-checkbox-wrapper]") || r(a);
     },
-    className: S(
+    className: L(
       "flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-control-accent-alpha-hover rounded-sm",
-      c && (i ? "border border-accent bg-control-accent-alpha" : "border border-primary"),
+      u && (d ? "border border-accent bg-control-accent-alpha" : "border border-primary"),
       v
     ),
     children: [
-      /* @__PURE__ */ x("div", { className: "relative w-[104px] h-[146px] bg-layer-raised rounded-sm overflow-hidden", children: [
-        s ? /* @__PURE__ */ e(
+      /* @__PURE__ */ g("div", { className: "relative w-[104px] h-[146px] bg-layer-raised rounded-sm overflow-hidden", children: [
+        l ? /* @__PURE__ */ e(
           "img",
           {
-            src: s,
-            alt: `Page ${t} thumbnail`,
+            src: l,
+            alt: `Page ${a} thumbnail`,
             className: "w-full h-full object-cover rounded-sm"
           }
         ) : null,
-        i && /* @__PURE__ */ e("div", { className: "absolute left-1 top-1 z-10", "data-checkbox-wrapper": !0, children: /* @__PURE__ */ e(
+        d && /* @__PURE__ */ e("div", { className: "absolute left-1 top-1 z-10", "data-checkbox-wrapper": !0, children: /* @__PURE__ */ e(
           ie,
           {
-            id: `page-thumbnail-${t}`,
-            isSelected: c,
-            onChange: () => r(t),
-            "aria-label": `Select page ${t}`
+            id: `page-thumbnail-${a}`,
+            isSelected: u,
+            onChange: () => r(a),
+            "aria-label": `Select page ${a}`
           }
         ) }),
-        o && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-backdrop rounded-sm", children: /* @__PURE__ */ e(
+        n && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-backdrop rounded-sm", children: /* @__PURE__ */ e(
           ue,
           {
             size: 24,
             fullWidth: !1,
-            ariaLabel: `Loading page ${t}`
+            ariaLabel: `Loading page ${a}`
           }
         ) })
       ] }),
-      /* @__PURE__ */ e("span", { className: "dial-tiny-text text-primary", children: t })
+      /* @__PURE__ */ e("span", { className: "dial-tiny-text text-primary", children: a })
     ]
   }
 );
 export {
-  $ as AUTO_ZOOM_ID,
-  Fe as DocumentPreview,
-  Le as DocumentPreviewCacheProvider,
-  G as FIT_ZOOM_ID,
+  H as AUTO_ZOOM_ID,
+  Re as DocumentPreview,
+  Fe as DocumentPreviewCacheProvider,
+  X as FIT_ZOOM_ID,
   Ne as PDFViewer,
   Me as PageThumbnail,
   Ce as PdfPreviewLoader,
   je as RotationDirection,
   ee as THUMBNAIL_BATCH_SIZE,
-  ge as THUMBNAIL_IMAGE_OPTIONS,
-  X as ZOOM_OPTIONS,
+  xe as THUMBNAIL_IMAGE_OPTIONS,
+  q as ZOOM_OPTIONS,
   Ie as getStepZoomOptionValue,
   te as isPdfFile,
-  _e as useDocumentPreview,
+  Ee as useDocumentPreview,
   Pe as useDocumentPreviewCache
 };

package/dist/src/components/DocumentPreview/DocumentPreview.d.ts

@@ -43,6 +43,12 @@ export interface DocumentPreviewProps {
     onThumbnailsLoaded?: (map: Map<number, string>) => void;
     /** Called when the underlying viewer is ready and its imperative API is available. */
     onViewerReady?: (api: PdfViewerApi) => void;
+    /**
+     * Called with the 1-based page number whenever the viewport's
+     * most-visible page changes, including changes driven by the reader
+     * scrolling the document rather than an explicit page navigation.
+     */
+    onCurrentPageChange?: (page: number) => void;
     /** Forces the loading overlay visible while parent-level work is in progress. */
     showLoaderOverlay?: boolean;
     /** Restricts viewer loading to selected pages only. */

package/dist/src/components/PdfViewer/PdfViewer.d.ts

@@ -23,6 +23,12 @@ export interface PdfViewerProps {
     onTotalPagesChange?: (totalPages: number) => void;
     /** Callback invoked with an imperative API when viewer setup completes. */
     onViewerReady?: (api: PdfViewerApi) => void;
+    /**
+     * Callback invoked with the 1-based page number whenever the viewport's
+     * most-visible page changes, including page changes driven by the reader
+     * scrolling the document rather than an explicit `navigateToPage` call.
+     */
+    onCurrentPageChange?: (page: number) => void;
     /** Optional list of pages to load instead of the full document. */
     selectedPages?: number[];
     /**

package/dist/src/models/pdf-viewer.models.d.ts

@@ -16,6 +16,8 @@ export interface PdfViewerApi {
     zoomOut: () => void;
     /** Returns the current numeric zoom value. */
     getZoom: () => number;
+    /** Returns the 1-based page number currently most visible in the viewport. */
+    getCurrentPage: () => number;
     /** Navigates to a specific 1-based page number. */
     navigateToPage: (page: number) => void;
     /** Sets extra clockwise display rotation for a 1-based page (on top of PDF `/Rotate`). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-react-pdf-highlighter",
-  "version": "0.2.0-dev.37",
+  "version": "0.2.0-dev.38",
   "type": "module",
   "license": "Apache-2.0",
   "description": "React components for PDF viewing and highlighting, built on @epam/pdf-highlighter-kit",