@epam/ai-dial-react-pdf-highlighter 0.1.0 → 0.1.2

package/README.md

@@ -61,16 +61,14 @@ npm install @epam/ai-dial-react-pdf-highlighter
 
 ### Peer Dependencies
 
-```bash
-npm install react react-dom \
-  @epam/ai-dial-ui-kit \
-  @epam/pdf-highlighter-kit \
-  @tabler/icons-react \
-  pdfjs-dist
-```
+| Type | Packages | npm | Yarn |
+| ---- | -------- | --- | ---- |
+| Required | `react`, `react-dom`, `@epam/pdf-highlighter-kit`, `@epam/ai-dial-ui-kit`, `pdfjs-dist` | `npm install react react-dom @epam/pdf-highlighter-kit @epam/ai-dial-ui-kit pdfjs-dist` | `yarn add react react-dom @epam/pdf-highlighter-kit @epam/ai-dial-ui-kit pdfjs-dist` |
+| Optional (for `DocumentPreview`) | `@tabler/icons-react` | `npm install @tabler/icons-react` | `yarn add @tabler/icons-react` |
 
 Your `pdfjs-dist` version should satisfy [pdf-highlighter-kit requirements](https://github.com/epam/pdf-highlighter-kit?tab=readme-ov-file#requirements).
 
+
 ### Basic Usage
 
 ```tsx

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

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

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as v, Fragment as le } from "react/jsx-runtime";
 import { mergeClasses as S, DialEllipsisTooltip as K, DialButton as j, ElementSize as B, DialSelect as oe, SelectSize as se, DialCheckbox as ce, DialLoader as ie } from "@epam/ai-dial-ui-kit";
 import { ZoomMode as Y, PDFHighlightViewer as ue } from "@epam/pdf-highlighter-kit";
-import { useRef as F, useState as E, useEffect as y, useCallback as O, createContext as me, useContext as de, useMemo as J } from "react";
+import { useRef as F, useState as E, useEffect as w, useCallback as O, createContext as me, useContext as de, useMemo as J } from "react";
 import { IconChevronDown as fe, IconChevronUp as pe, IconMinus as ve, IconPlus as be, IconAlertTriangle as he } from "@tabler/icons-react";
 const H = "auto", G = "page-fit", X = [
   { value: H, label: "Auto" },
@@ -17,29 +17,29 @@ const H = "auto", G = "page-fit", X = [
   maxWidth: 104,
   format: "image/jpeg",
   quality: 0.85
-}, Q = 15, we = "application/pdf", ye = ".pdf", ge = ({
+}, Q = 15, ye = "application/pdf", we = ".pdf", ge = ({
   pdf: t,
   highlights: a,
   selectedHighlightId: i,
   autoFocusFirstHighlight: n = !1,
   selectedPageNumber: u,
   zoom: s,
-  containerClassName: d,
-  onTotalPagesChange: f,
+  containerClassName: f,
+  onTotalPagesChange: d,
   onViewerReady: g,
   selectedPages: m
 }) => {
-  const h = F(null), r = F(null), [o, T] = E(!1), [_, b] = E(!1), D = F(f), z = F(g);
-  y(() => {
-    D.current = f;
-  }, [f]), y(() => {
+  const h = F(null), r = F(null), [o, T] = E(!1), [_, b] = E(!1), D = F(d), z = F(g);
+  w(() => {
+    D.current = d;
+  }, [d]), w(() => {
     z.current = g;
   }, [g]);
   const N = O(
     (l) => r.current?.goToHighlight(l),
     []
   );
-  return y(() => {
+  return w(() => {
     if (!h.current) return;
     T(!1), b(!1), r.current && (r.current.destroy(), r.current = null);
     let l = null, p = !0;
@@ -67,13 +67,13 @@ const H = "auto", G = "page-fit", X = [
     })(), () => {
       p = !1, l && l.destroy();
     };
-  }, [t, m]), y(() => {
+  }, [t, m]), w(() => {
     !o || !r.current || (r.current.loadHighlights(a), n && a && a[0] && N(a[0].id));
-  }, [n, N, a, o]), y(() => {
+  }, [n, N, a, o]), w(() => {
     b(!0);
-  }, [a]), y(() => {
+  }, [a]), w(() => {
     o && _ && i && N(i);
-  }, [N, o, _, i]), y(() => {
+  }, [N, o, _, i]), w(() => {
     if (!(!o || !s))
       if (s === H)
         r.current?.setZoom?.(Y.AUTO);
@@ -83,9 +83,9 @@ const H = "auto", G = "page-fit", X = [
         const l = parseFloat(s);
         !Number.isNaN(l) && l > 0 && r.current?.setZoom?.(l);
       }
-  }, [o, s]), y(() => {
+  }, [o, s]), w(() => {
     o && u && r.current?.setPage?.(u);
-  }, [o, u]), y(() => {
+  }, [o, u]), w(() => {
     if (!o || !r.current) return;
     const l = r.current;
     z.current?.({
@@ -101,7 +101,7 @@ const H = "auto", G = "page-fit", X = [
       ref: h,
       className: S(
         "grow min-w-0 overflow-auto bg-layer-3",
-        d
+        f
       )
     }
   );
@@ -157,14 +157,14 @@ const H = "auto", G = "page-fit", X = [
     return t;
   const n = Number.parseFloat(t), u = !Number.isNaN(n) && n > 0 ? n : i, s = typeof u == "number" && u > 0 ? u : Number.parseFloat(Z[0].value);
   return a === 1 ? (Z.find(
-    ({ value: d }) => Number.parseFloat(d) > s
+    ({ value: f }) => Number.parseFloat(f) > s
   ) ?? Z[Z.length - 1]).value : (Te.find(
-    ({ value: d }) => Number.parseFloat(d) < s
+    ({ value: f }) => Number.parseFloat(f) < s
   ) ?? Z[0]).value;
 };
 function Pe(t, a) {
   const i = (t ?? "").toLowerCase();
-  return (a ?? "").toLowerCase() === we || i.endsWith(ye);
+  return (a ?? "").toLowerCase() === ye || i.endsWith(we);
 }
 const ee = X.map((t) => ({
   value: t.value,
@@ -176,8 +176,8 @@ const ee = X.map((t) => ({
   highlights: n,
   selectedPageNumber: u,
   onTotalPagesChange: s,
-  thumbnailPageNumbers: d,
-  onThumbnailsLoaded: f,
+  thumbnailPageNumbers: f,
+  onThumbnailsLoaded: d,
   onViewerReady: g,
   showLoaderOverlay: m = !1,
   selectedPages: h
@@ -200,22 +200,22 @@ const ee = X.map((t) => ({
     [b, n.length]
   ), R = O(
     (c) => {
-      const w = o.current;
-      !w?.getZoom || !c || A(Ce(I, c, w.getZoom()));
+      const y = o.current;
+      !y?.getZoom || !c || A(Ce(I, c, y.getZoom()));
     },
     [I]
   ), $ = J(() => {
-    if (!(I === H || I === G || X.some((w) => w.value === I))) {
-      const w = parseFloat(I);
-      if (!Number.isNaN(w) && w > 0)
+    if (!(I === H || I === G || X.some((y) => y.value === I))) {
+      const y = parseFloat(I);
+      if (!Number.isNaN(y) && y > 0)
         return [
           ...ee,
-          { value: I, label: `${Math.round(w * 100)}%` }
+          { value: I, label: `${Math.round(y * 100)}%` }
         ];
     }
     return ee;
   }, [I]);
-  y(() => {
+  w(() => {
     let c = !1;
     if (p(!0), N(!1), x(null), _(!1), o.current = null, !k) {
       N(!0), p(!1);
@@ -240,9 +240,9 @@ const ee = X.map((t) => ({
     },
     [g]
   );
-  return y(() => {
-    const c = d ?? [], w = o.current?.getThumbnailsDataUrl;
-    if (!c.length || !w || !P || !f || !T)
+  return w(() => {
+    const c = f ?? [], y = o.current?.getThumbnailsDataUrl;
+    if (!c.length || !y || !P || !d || !T)
       return;
     let L = !1;
     return (async () => {
@@ -250,9 +250,9 @@ const ee = X.map((t) => ({
       for (let V = 0; V < c.length && !L; V += Q) {
         const re = c.slice(V, V + Q);
         try {
-          const W = await w(re, xe);
+          const W = await y(re, xe);
           if (L) break;
-          W.forEach((ae, ne) => q.set(ne, ae)), f(new Map(q));
+          W.forEach((ae, ne) => q.set(ne, ae)), d(new Map(q));
         } catch (W) {
           console.warn("Thumbnail batch load failed:", W);
           break;
@@ -261,7 +261,7 @@ const ee = X.map((t) => ({
     })(), () => {
       L = !0;
     };
-  }, [d, P, f, T]), {
+  }, [f, P, d, T]), {
     file: P,
     isLoading: l,
     isError: z,
@@ -283,8 +283,8 @@ const ee = X.map((t) => ({
   occurrencesLabel: n,
   unsupportedLabel: u,
   highlights: s,
-  loadFileCb: d,
-  showOccurrences: f = !0,
+  loadFileCb: f,
+  showOccurrences: d = !0,
   selectedPageNumber: g,
   containerClassName: m,
   pdfViewerClassName: h,
@@ -311,7 +311,7 @@ const ee = X.map((t) => ({
   } = Oe({
     fileUrl: t,
     fileName: a,
-    loadFileCb: d,
+    loadFileCb: f,
     highlights: s,
     selectedPageNumber: g,
     onTotalPagesChange: r,
@@ -332,7 +332,7 @@ const ee = X.map((t) => ({
         a && /* @__PURE__ */ e(
           K,
           {
-            className: "dial-tiny-text text-secondary",
+            className: "dial-tiny-text text-secondary !flex-none",
             text: a
           }
         ),
@@ -341,10 +341,10 @@ const ee = X.map((t) => ({
           {
             className: S(
               "flex w-full justify-between items-center",
-              f && o ? "gap-2" : ""
+              d && o ? "gap-2" : ""
             ),
             children: [
-              /* @__PURE__ */ e("div", { children: f ? /* @__PURE__ */ v("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit", children: [
+              /* @__PURE__ */ e("div", { children: d ? /* @__PURE__ */ v("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit", children: [
                 /* @__PURE__ */ v("span", { className: "dial-small-text", children: [
                   n ?? "Occurrences",
                   ":",
@@ -432,7 +432,7 @@ const ee = X.map((t) => ({
             {
               pdf: N,
               highlights: s,
-              selectedHighlightId: s[P]?.id,
+              selectedHighlightId: d ? s[P]?.id : void 0,
               selectedPageNumber: g,
               zoom: x,
               onTotalPagesChange: r,
@@ -468,12 +468,12 @@ const ee = X.map((t) => ({
     const m = Date.now();
     for (const [h, r] of n.current.entries())
       r.file && m - r.timestamp > a && n.current.delete(h);
-  }, [a]), d = O(() => {
+  }, [a]), f = O(() => {
     for (; n.current.size > i; ) {
       const m = n.current.keys().next().value;
       m && n.current.delete(m);
     }
-  }, [i]), f = O(() => {
+  }, [i]), d = O(() => {
     n.current.clear();
   }, []), g = O(
     async (m, h) => {
@@ -487,15 +487,15 @@ const ee = X.map((t) => ({
       }
       const o = Date.now(), T = h().then((b) => {
         const D = { file: b, timestamp: Date.now() };
-        return u(m, D), d(), b;
+        return u(m, D), f(), b;
       }).catch((b) => {
         throw n.current.delete(m), b;
       });
-      return u(m, { promise: T, timestamp: o }), d(), T;
+      return u(m, { promise: T, timestamp: o }), f(), T;
     },
-    [d, s, u]
+    [f, s, u]
   );
-  return y(() => () => f(), [f]), /* @__PURE__ */ e(te.Provider, { value: { getFile: g, clearCache: f }, children: t });
+  return w(() => () => d(), [d]), /* @__PURE__ */ e(te.Provider, { value: { getFile: g, clearCache: d }, children: t });
 }, Re = ({
   pageNum: t,
   onSelectPage: a,
@@ -503,20 +503,20 @@ const ee = X.map((t) => ({
   isLoading: n,
   isMultiselect: u,
   thumbnailUrl: s,
-  className: d
+  className: f
 }) => /* @__PURE__ */ v(
   "button",
   {
     type: "button",
     "aria-label": `Page ${t}`,
     "aria-pressed": i,
-    onClick: (f) => {
-      u && f.target.closest("[data-checkbox-wrapper]") || a(t);
+    onClick: (d) => {
+      u && d.target.closest("[data-checkbox-wrapper]") || a(t);
     },
     className: S(
       "flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",
       i && (u ? "border border-accent-primary bg-accent-primary-alpha" : "border border-primary"),
-      d
+      f
     ),
     children: [
       /* @__PURE__ */ v("div", { className: "relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden", children: [

package/dist/index.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-accent-primary{border-color:var(--stroke-accent-primary,#7da4ff)}.border-primary{border-color:var(--stroke-primary,#696e7c)}.border-transparent{border-color:transparent}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-blackout{background-color:var(--bg-blackout,#0c101db3)}.bg-layer-1{background-color:var(--bg-layer-1,#0c101d)}.bg-layer-2{background-color:var(--bg-layer-2,#161b2d)}.bg-layer-3{background-color:var(--bg-layer-3,#1d2439)}.bg-layer-4{background-color:var(--bg-layer-4,#242c42)}.bg-model-icon{background-color:var(--bg-model-icon,#fff)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-4{--tw-gradient-from:var(--bg-layer-4,#242c42) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-3{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-3,#1d2439) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-4{--tw-gradient-to:var(--bg-layer-4,#242c42) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.text-primary{color:var(--text-primary,#eef1f7)}.text-secondary{color:var(--text-secondary,#9fa6bd)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:border-primary:before{content:var(--tw-content);border-color:var(--stroke-primary,#696e7c)}.before\:bg-model-icon:before{content:var(--tw-content);background-color:var(--bg-model-icon,#fff)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#242c42)}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.\!flex-none{flex:none!important}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-accent-primary{border-color:var(--stroke-accent-primary,#7da4ff)}.border-primary{border-color:var(--stroke-primary,#696e7c)}.border-transparent{border-color:transparent}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-blackout{background-color:var(--bg-blackout,#0c101db3)}.bg-layer-1{background-color:var(--bg-layer-1,#0c101d)}.bg-layer-2{background-color:var(--bg-layer-2,#161b2d)}.bg-layer-3{background-color:var(--bg-layer-3,#1d2439)}.bg-layer-4{background-color:var(--bg-layer-4,#242c42)}.bg-model-icon{background-color:var(--bg-model-icon,#fff)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-4{--tw-gradient-from:var(--bg-layer-4,#242c42) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-3{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-3,#1d2439) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-4{--tw-gradient-to:var(--bg-layer-4,#242c42) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.text-primary{color:var(--text-primary,#eef1f7)}.text-secondary{color:var(--text-secondary,#9fa6bd)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:border-primary:before{content:var(--tw-content);border-color:var(--stroke-primary,#696e7c)}.before\:bg-model-icon:before{content:var(--tw-content);background-color:var(--bg-model-icon,#fff)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#242c42)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-react-pdf-highlighter",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "license": "Apache-2.0",
   "description": "React components for PDF viewing and highlighting, built on @epam/pdf-highlighter-kit",
@@ -9,6 +9,10 @@
     "node": ">=22.2.0",
     "npm": ">=10.7.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epam/ai-dial-react-pdf-highlighter"
+  },
   "exports": {
     ".": {
       "types": "./dist/src/index.d.ts",
@@ -54,13 +58,23 @@
     ]
   },
   "peerDependencies": {
-    "@epam/ai-dial-ui-kit": ">=0.8.0",
+    "@epam/ai-dial-ui-kit": ">=0.8.0-0 || >=0.9.0-rc.0",
     "@epam/pdf-highlighter-kit": ">=0.0.13",
     "@tabler/icons-react": "^3.0.0",
     "pdfjs-dist": ">=4.0.0",
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "peerDependenciesMeta": {
+    "@tabler/icons-react": {
+      "optional": true
+    }
+  },
+  "overrides": {
+    "minimatch": ">=3.1.4",
+    "picomatch": ">=2.3.2",
+    "tar": ">=7.5.11"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@epam/ai-dial-ui-kit": "0.9.0-rc.20",