@scaleflex/widget-pdf-js 4.4.0 → 4.5.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.5.0...v4.5.1) (2025-10-14)
+
+**Note:** Version bump only for package @scaleflex/widget-pdf-js
+
+
+
+
+
+# [4.5.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.4.0...v4.5.0) (2025-10-08)
+
+**Note:** Version bump only for package @scaleflex/widget-pdf-js
+
+
+
+
+
 # [4.4.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.4.0) (2025-10-07)
 
 **Note:** Version bump only for package @scaleflex/widget-pdf-js

package/lib/components/Footer/Footer.styled.js

@@ -0,0 +1,48 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC } from '@scaleflex/widget-common';
+import { Arrow } from '@scaleflex/icons';
+import { IconButton, Input } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+var Footer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 62px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n  padding: 0 24px;\n  padding-left: calc(24px - 10px);\n\n  ", "\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      height: 52px;\n      border-bottom: 1px solid ", ";\n    }\n  "])), theme.breakpoints.down('lg'), theme.palette[PC.BordersSecondary]);
+});
+var NumPagesLabel = styled.p(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0;\n  white-space: nowrap;\n  color: ", ";\n  ", ";\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref4) {
+  var typography = _ref4.theme.typography;
+  return typography.font[FV.LabelMedium];
+});
+var PagesInput = styled(Input)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 48px;\n"])));
+var ControlsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n"])));
+var ZoomWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
+var ZoomControllersWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  overflow-x: auto;\n"])));
+var ZoomButtons = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 8px;\n  border-radius: 4px;\n  height: 32px;\n  width: 130px;\n\n  span {\n    ", ";\n    color: ", ";\n    padding: 0 8px;\n    cursor: pointer;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.typography.font[FV.LabelMedium];
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette[PC.TextSecondary];
+});
+var ZoomButton = styled(IconButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: inline-flex;\n"])));
+var ArrowIcon = styled(Arrow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  transform: ", ";\n"])), function (_ref7) {
+  var $flip = _ref7.$flip;
+  return $flip ? 'scale(-1)' : 'none';
+});
+var Styled = {
+  Footer: Footer,
+  NumPagesLabel: NumPagesLabel,
+  PagesInput: PagesInput,
+  ControlsWrapper: ControlsWrapper,
+  ZoomWrapper: ZoomWrapper,
+  ZoomControllersWrapper: ZoomControllersWrapper,
+  ZoomButtons: ZoomButtons,
+  ZoomButton: ZoomButton,
+  ArrowIcon: ArrowIcon
+};
+export default Styled;

package/lib/components/Footer/ZoomControllers.js

@@ -0,0 +1,47 @@
+import { BTN_ZOOM_RATIO_PERCENTAGE, DEFAULT_ZOOM_RATIO, MAX_ZOOM_RATIO } from '@scaleflex/widget-explorer/lib/components/FileWindowPanel/Body/Body.constants';
+import { Minus, Plus, PositionCenter } from '@scaleflex/icons';
+import Styled from './Footer.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ZoomControllers = function ZoomControllers(_ref) {
+  var zoomRatio = _ref.zoomRatio,
+    setZoomRatio = _ref.setZoomRatio;
+  var zoomIn = function zoomIn() {
+    var nextZoomRatio = Math.min(zoomRatio + BTN_ZOOM_RATIO_PERCENTAGE, MAX_ZOOM_RATIO);
+    setZoomRatio(nextZoomRatio);
+  };
+  var zoomOut = function zoomOut() {
+    var nextZoomRatio = Math.min(Math.max(zoomRatio - BTN_ZOOM_RATIO_PERCENTAGE, BTN_ZOOM_RATIO_PERCENTAGE));
+    setZoomRatio(nextZoomRatio);
+  };
+  var resetZoom = function resetZoom() {
+    setZoomRatio(DEFAULT_ZOOM_RATIO);
+  };
+  return /*#__PURE__*/_jsxs(Styled.ZoomControllersWrapper, {
+    children: [/*#__PURE__*/_jsxs(Styled.ZoomButtons, {
+      children: [/*#__PURE__*/_jsx(Styled.ZoomButton, {
+        size: "lg",
+        color: "basic",
+        onClick: zoomOut,
+        children: /*#__PURE__*/_jsx(Minus, {})
+      }), /*#__PURE__*/_jsxs("span", {
+        onClick: resetZoom,
+        children: [parseInt(zoomRatio * 100), "%"]
+      }), /*#__PURE__*/_jsx(Styled.ZoomButton, {
+        size: "lg",
+        color: "basic",
+        onClick: zoomIn,
+        children: /*#__PURE__*/_jsx(Plus, {
+          size: 18
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Styled.ZoomButton, {
+      size: "lg",
+      color: "basic",
+      onClick: resetZoom,
+      children: /*#__PURE__*/_jsx(PositionCenter, {
+        size: 18
+      })
+    })]
+  });
+};
+export default ZoomControllers;

package/lib/components/Footer/index.js

@@ -0,0 +1,101 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { IconButton, TooltipV2 } from '@scaleflex/ui/core';
+import { useState } from 'react';
+import { useUpdateEffect } from '@scaleflex/widget-common/lib/hooks';
+import Styled from './Footer.styled';
+import ZoomControllers from './ZoomControllers';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Footer = function Footer(_ref) {
+  var i18n = _ref.i18n,
+    isLoading = _ref.isLoading,
+    numOfPages = _ref.numOfPages,
+    currentPage = _ref.currentPage,
+    setCurrentPage = _ref.setCurrentPage,
+    zoomRatio = _ref.zoomRatio,
+    setZoomRatio = _ref.setZoomRatio;
+  var isReachedPdfMaxPages = currentPage >= numOfPages;
+  var isReachedPdfMinPages = currentPage <= 1;
+  var _useState = useState(currentPage),
+    _useState2 = _slicedToArray(_useState, 2),
+    pdfPage = _useState2[0],
+    setPdfPage = _useState2[1];
+  useUpdateEffect(function () {
+    if (currentPage !== pdfPage) {
+      setPdfPage(currentPage);
+    }
+  }, [currentPage]);
+  var goPrevPage = function goPrevPage() {
+    if (isReachedPdfMinPages || isLoading) return;
+    var prevPage = currentPage - 1;
+    setCurrentPage(prevPage);
+  };
+  var goNextPage = function goNextPage() {
+    if (isReachedPdfMaxPages || isLoading) return;
+    var nextPage = currentPage + 1;
+    setCurrentPage(nextPage);
+  };
+  var handleChangePage = function handleChangePage(event) {
+    var pageNumber = parseInt(event.target.value, 10) || '';
+    var isValid = Number.isFinite(pageNumber);
+    if (isValid || !pageNumber) {
+      setPdfPage(pageNumber);
+    }
+  };
+  var handleSubmitPage = function handleSubmitPage(event) {
+    var keyCode = event.keyCode;
+    if (keyCode === 13) {
+      // Enter key
+      var validPageNumber = Math.min(Math.max(pdfPage, 1), numOfPages);
+      setPdfPage(validPageNumber);
+      setCurrentPage(validPageNumber);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Styled.Footer, {
+    children: [/*#__PURE__*/_jsxs(Styled.ControlsWrapper, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        color: "basic",
+        size: "sm",
+        onClick: goPrevPage,
+        disabled: isLoading || isReachedPdfMinPages,
+        children: /*#__PURE__*/_jsx(Styled.ArrowIcon, {
+          size: 14,
+          $flip: true
+        })
+      }), /*#__PURE__*/_jsx(TooltipV2, {
+        position: "top",
+        title: i18n('pdfJsPageChangeInputTooltipHint'),
+        arrow: true,
+        children: /*#__PURE__*/_jsx(Styled.PagesInput, {
+          size: "sm",
+          onKeyDown: handleSubmitPage,
+          value: pdfPage || '',
+          disabled: isLoading || !(numOfPages > 1),
+          onChange: handleChangePage
+        })
+      }), /*#__PURE__*/_jsx(Styled.NumPagesLabel, {
+        children: i18n('pdfPreviewNumOfPages', {
+          count: numOfPages
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
+        color: "basic",
+        size: "sm",
+        onClick: goNextPage,
+        disabled: isLoading || isReachedPdfMaxPages,
+        children: /*#__PURE__*/_jsx(Styled.ArrowIcon, {
+          size: 14
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Styled.ZoomWrapper, {
+      children: /*#__PURE__*/_jsx(ZoomControllers, {
+        zoomRatio: zoomRatio,
+        setZoomRatio: setZoomRatio
+      })
+    })]
+  });
+};
+export default Footer;

package/lib/components/PdfPreview.js

@@ -0,0 +1,257 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useEffect, useRef, useState } from 'react';
+import { Skeleton } from '@scaleflex/ui/core';
+import { useIsUnMountedRef } from '@scaleflex/widget-common/lib/hooks';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import Footer from './Footer';
+import Styled from './PdfPreview.styled';
+
+// pdfSource === pdf's link/path or file class/object's data (in-case of uploadable file)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var PdfPreview = function PdfPreview(_ref) {
+  var pdfSource = _ref.pdfSource,
+    prepareDocument = _ref.prepareDocument,
+    i18n = _ref.i18n,
+    onError = _ref.onError;
+  var containerRef = useRef();
+  var canvasRef = useRef();
+  var mousePosition = useRef();
+  var cursorDisplacement = useRef();
+  var transformation = useRef();
+  var pdfLoadedDocument = useRef();
+  var isUnMountedRef = useIsUnMountedRef();
+  var pendingPageNumToRender = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMouseDown = _useState2[0],
+    setIsMouseDown = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    zoomRatio = _useState6[0],
+    setZoomRatio = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    numOfPages = _useState8[0],
+    setNumOfPages = _useState8[1];
+  var _useState9 = useState(!pdfSource),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isLoading = _useState10[0],
+    setIsLoading = _useState10[1];
+  var loadPdfDocument = async function loadPdfDocument() {
+    if (!pdfSource) {
+      onError(i18n('pdfJsPdfPreviewErrorInvalidPath'));
+      return;
+    }
+    try {
+      setIsLoading(true);
+      var docSrc = typeof pdfSource === 'string' ? pdfSource : await pdfSource.arrayBuffer();
+      pdfLoadedDocument.current = prepareDocument(docSrc);
+      pdfLoadedDocument.current = await pdfLoadedDocument.current.promise;
+      var pdf = pdfLoadedDocument.current;
+      if (isUnMountedRef.current) {
+        return;
+      }
+      setNumOfPages(pdf.numPages);
+      changePage(1);
+    } catch (error) {
+      onError(error.message);
+    }
+  };
+  var changePage = async function changePage(pageNum) {
+    if (!pdfLoadedDocument.current || !pageNum) {
+      return;
+    }
+    try {
+      setCurrentPage(pageNum);
+      setIsLoading(true);
+
+      // For avoiding can't use the same canvas during multiple render operations error from pdfjs
+      // This might happen on changing the page while some current page being rendered (ex. clicking next/back arrows of pages multiple times)
+      if (pendingPageNumToRender.current) {
+        pendingPageNumToRender.current = pageNum;
+        return;
+      }
+      pendingPageNumToRender.current = pageNum;
+      var page = await pdfLoadedDocument.current.getPage(pageNum);
+      if (isUnMountedRef.current) {
+        return;
+      }
+      updateCanvas(page);
+      setIsLoading(false);
+    } catch (error) {
+      onError(error.message);
+    }
+  };
+  var updateCanvas = function updateCanvas(page) {
+    var _containerRef$current = containerRef.current,
+      containerWidth = _containerRef$current.offsetWidth,
+      containerHeight = _containerRef$current.offsetHeight;
+    var canvas = canvasRef.current;
+    var canvasContext = canvas.getContext('2d');
+    var viewport = page.getViewport({
+      scale: 1
+    });
+    var widthRatio = containerWidth / viewport.width;
+    var heightRatio = containerHeight / viewport.height;
+    canvas.width = Math.floor(viewport.width * devicePixelRatio * 2);
+    canvas.height = Math.floor(viewport.height * devicePixelRatio * 2);
+    if (widthRatio < heightRatio) {
+      canvas.style.width = Math.floor(viewport.width * widthRatio) + 'px';
+      canvas.style.height = Math.floor(viewport.height * widthRatio) + 'px';
+    } else {
+      canvas.style.width = Math.floor(viewport.width * heightRatio) + 'px';
+      canvas.style.height = Math.floor(viewport.height * heightRatio) + 'px';
+    }
+    var transform = [
+    // Transfrom Matrix
+    canvas.width / viewport.width, 0, 0, canvas.height / viewport.height, 0, 0];
+    var renderContext = {
+      canvasContext: canvasContext,
+      viewport: viewport,
+      transform: transform
+    };
+    page.render(renderContext).promise["finally"](function () {
+      var pageNum = pendingPageNumToRender.current;
+      pendingPageNumToRender.current = null;
+      if (pageNum && page.pageNumber !== pageNum) {
+        changePage(pageNum);
+      }
+    });
+  };
+  var setCursorPosition = function setCursorPosition(event) {
+    mousePosition.current = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  };
+  var getCursorPositionInCanvas = function getCursorPositionInCanvas() {
+    var cursorPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      x: 0,
+      y: 0
+    };
+    var canvas = canvasRef.current;
+    var canvasRect = canvas.getBoundingClientRect();
+    return {
+      x: cursorPosition.x - canvasRect.left,
+      y: cursorPosition.y - canvasRect.top
+    };
+  };
+  var getMouseDisplacement = function getMouseDisplacement(event) {
+    var clientX = event.clientX,
+      clientY = event.clientY;
+    var _mousePosition = mousePosition.current || {};
+    var prevPosition = getCursorPositionInCanvas(_mousePosition);
+    var nextPosition = getCursorPositionInCanvas({
+      x: clientX,
+      y: clientY
+    });
+    return {
+      x: (nextPosition.x - prevPosition.x) / zoomRatio,
+      y: (nextPosition.y - prevPosition.y) / zoomRatio
+    };
+  };
+  var changeZoomRatio = function changeZoomRatio(newRatio) {
+    setZoomRatio(newRatio);
+    zoomCanvas(newRatio);
+  };
+  var zoomCanvas = function zoomCanvas() {
+    var currentZoomRatio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    var mouseDisplacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      x: 0,
+      y: 0
+    };
+    var container = containerRef.current;
+    var prevTransformation = transformation.current || {
+      x: 0,
+      y: 0
+    };
+    var scaledWidth = container.offsetWidth * currentZoomRatio;
+    var scaledHeight = container.offsetHeight * currentZoomRatio;
+    var nextTransformation = {
+      x: 0,
+      y: 0
+    };
+    if (currentZoomRatio > 1) {
+      nextTransformation = {
+        x: prevTransformation.x + mouseDisplacement.x,
+        y: prevTransformation.y + mouseDisplacement.y
+      };
+      var panningArea = {
+        x: (scaledWidth - container.offsetWidth) / (2 * currentZoomRatio),
+        y: (scaledHeight - container.offsetHeight) / (2 * currentZoomRatio)
+      };
+      nextTransformation = {
+        x: Math.min(Math.max(nextTransformation.x, -panningArea.x), panningArea.x),
+        y: Math.min(Math.max(nextTransformation.y, -panningArea.y), panningArea.y)
+      };
+    }
+    cursorDisplacement.current = nextTransformation;
+    container.style.transform = "scale(".concat(currentZoomRatio, ") translate(").concat(nextTransformation.x, "px, ").concat(nextTransformation.y, "px)");
+  };
+  var handleStartPanning = function handleStartPanning(event) {
+    if (zoomRatio > 1) {
+      setIsMouseDown(true);
+      setCursorPosition(event);
+    }
+  };
+  var handleReleasePanning = function handleReleasePanning() {
+    setIsMouseDown(false);
+    transformation.current = cursorDisplacement.current;
+  };
+  var handleMouseMove = function handleMouseMove(event) {
+    if (!isMouseDown) return;
+    var mouseDisplacement = getMouseDisplacement(event);
+    zoomCanvas(zoomRatio, mouseDisplacement);
+  };
+  useEffect(function () {
+    loadPdfDocument();
+    return function () {
+      var _pdfLoadedDocument$cu;
+      if ((_pdfLoadedDocument$cu = pdfLoadedDocument.current) !== null && _pdfLoadedDocument$cu !== void 0 && _pdfLoadedDocument$cu.destroy) {
+        handlePromise(pdfLoadedDocument.current.destroy());
+      }
+      setCurrentPage(1);
+      setZoomRatio(1);
+    };
+  }, [pdfSource]);
+  if (!pdfSource) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Styled.Container, {
+    children: [/*#__PURE__*/_jsxs(Styled.PreviewExtraWrapper, {
+      children: [isLoading && /*#__PURE__*/_jsx(Skeleton, {
+        width: "100%",
+        height: "100%"
+      }), /*#__PURE__*/_jsx(Styled.PreviewContainer, {
+        ref: containerRef,
+        onMouseDown: handleStartPanning,
+        onMouseUp: handleReleasePanning,
+        onMouseLeave: handleReleasePanning,
+        $isMouseDown: isMouseDown,
+        $scale: zoomRatio || 1,
+        onMouseMove: handleMouseMove,
+        children: /*#__PURE__*/_jsx("canvas", {
+          ref: canvasRef
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Footer, {
+      i18n: i18n,
+      numOfPages: numOfPages,
+      isLoading: isLoading,
+      currentPage: currentPage,
+      setCurrentPage: changePage,
+      zoomRatio: zoomRatio,
+      setZoomRatio: changeZoomRatio
+    })]
+  });
+};
+export default PdfPreview;

package/lib/components/PdfPreview.styled.js

@@ -0,0 +1,43 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { IconButton as SfxIconButton } from '@scaleflex/ui/core';
+import { PC } from '@scaleflex/widget-common';
+import { Spinner as SfxSpinner } from '@scaleflex/icons';
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " {\n      background-color: ", ";\n    }\n  "])), theme.breakpoints.down('lg'), theme.palette[PC.BackgroundActive]);
+});
+var PreviewExtraWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: calc(100% - (24px * 2));\n  max-width: calc(100% - (24px * 2));\n  height: calc(100% - 62px);\n  max-height: calc(100% - 62px);\n  overflow: hidden;\n  margin: 0 auto;\n  position: relative;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundActive];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", " {\n      height: calc(100% - 52px);\n      max-height: calc(100% - 52px);\n    }\n  "])), theme.breakpoints.down('lg'));
+});
+var PreviewContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n\n  canvas {\n    margin: 0;\n    padding: 0;\n  }\n"])), function (_ref4) {
+  var $scale = _ref4.$scale,
+    $isMouseDown = _ref4.$isMouseDown;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    transition: ", ";\n    cursor: ", ";\n  "])), $isMouseDown ? 'none' : 'transform 200ms linear', $scale > 1 ? 'grab' : 'default');
+});
+var IconButton = styled(SfxIconButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  width: 40px;\n  height: 40px;\n  padding: 10px;\n  background-color: ", ";\n\n  ", "\n"])), function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.Accent_1_8_Opacity];
+}, function (_ref6) {
+  var left = _ref6.left;
+  return left ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: 12px;\n  "]))) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    right: 12px;\n  "])));
+});
+var SpinnerWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  z-index: 100;\n  transform: translate(-50%, 50%);\n"])));
+var Spinner = styled(SfxSpinner)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  animation: spinner 1.2s linear infinite;\n  color: ", ";\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.AccentStateless];
+});
+var Styled = {
+  Container: Container,
+  PreviewExtraWrapper: PreviewExtraWrapper,
+  PreviewContainer: PreviewContainer,
+  IconButton: IconButton,
+  SpinnerWrapper: SpinnerWrapper,
+  Spinner: Spinner
+};
+export default Styled;

package/lib/defaultLocale.js

@@ -0,0 +1,6 @@
+export default {
+  pdfPreviewNumOfPages: 'of %{count} pages',
+  pdfJsPageChangeInputTooltipHint: 'Press enter after change',
+  pdfJsPdfPreviewErrorLabel: 'Unable to view this PDF document',
+  pdfJsPdfPreviewErrorInvalidPath: 'Invalid PDF document source provided'
+};

package/lib/index.js

@@ -0,0 +1,186 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import { Plugin, ScaleflexWidget } from '@scaleflex/widget-core';
+import Explorer from '@scaleflex/widget-explorer';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import defaultLocale from './defaultLocale';
+import PdfPreview from './components/PdfPreview';
+
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+var PdfJs = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function PdfJs(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, PdfJs);
+    _this = _callSuper(this, PdfJs, [filerobot, opts]);
+    _this.id = PLUGINS_IDS.PDF_JS;
+    _this.libId = 'pdfjs-lib';
+    _this.title = 'Pdf-js';
+    _this.type = 'editor';
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+    _this.opts = opts;
+    _this.i18nInit();
+    _this.prepareDocument = _this.prepareDocument.bind(_this);
+    _this.render = _this.render.bind(_this);
+    return _this;
+  }
+  _inherits(PdfJs, _Plugin);
+  return _createClass(PdfJs, [{
+    key: "i18nInit",
+    value: function i18nInit() {
+      this.translator = new Translator([this.defaultLocale, this.filerobot.locale, this.opts.locale]);
+      this.i18n = this.translator.translate.bind(this.translator);
+      this.i18nArray = this.translator.translateArray.bind(this.translator);
+    }
+  }, {
+    key: "install",
+    value: function install() {
+      if (Explorer) {
+        this.mount(Explorer, this);
+        this.loadLib();
+      }
+    }
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      this.unmount();
+      this.removeLib();
+    }
+  }, {
+    key: "loadLib",
+    value: function loadLib() {
+      var _this2 = this;
+      if (this.isPdfJsLibLoading) {
+        return;
+      }
+      this.isPdfJsLibLoading = true;
+
+      // We are using both pdfjs & its worker from CDN as they needs dynamic import, that would cause a change in vite's build target
+      // Also would cause to change the bundled JS bundle type from umd to es, so using the CDN avoids that.
+      var script = document.createElement('script');
+      script.id = this.libId;
+      script.src = 'https://cdn.scaleflex.com/plugins/widget/assets/js/pdf.min.js?vh=a4641a&func=proxy';
+      script.async = true;
+      script.onload = function () {
+        _this2.pdfJsLib = window.pdfjsLib;
+        _this2.pdfJsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.scaleflex.com/plugins/widget/assets/js/pdf.worker.js?vh=49162d&func=proxy';
+        _this2.isPdfJsLibLoading = false;
+        if (typeof _this2.onLoadPdfJsLib === 'function') {
+          _this2.onLoadPdfJsLib();
+          _this2.onLoadPdfJsLib = null;
+        }
+      };
+      script.onerror = function () {
+        _this2.isPdfJsLibLoading = false;
+        _this2.removeLib();
+        if (typeof _this2.onErrorPdfJsLib === 'function') {
+          _this2.onErrorPdfJsLib();
+          _this2.onErrorPdfJsLib = null;
+        }
+      };
+      document.body.appendChild(script);
+    }
+  }, {
+    key: "removeLib",
+    value: function removeLib() {
+      this.isPdfJsLibLoading = false;
+      var element = document.getElementById(this.libId);
+      if (element) {
+        document.body.removeChild(element);
+      }
+    }
+  }, {
+    key: "handleLoadingDocumentError",
+    value: function handleLoadingDocumentError(setIsFailedToViewPdf, reason) {
+      var abortMsgsToDismiss = ['worker was destroyed', 'transport destroyed', 'canceled'];
+      if (abortMsgsToDismiss.includes(reason === null || reason === void 0 ? void 0 : reason.toLowerCase())) {
+        return;
+      }
+      this.info({
+        message: this.i18n('pdfJsPdfPreviewErrorLabel'),
+        details: reason || ''
+      }, 'warning', 5000);
+      setIsFailedToViewPdf(true);
+    }
+  }, {
+    key: "waitForLibLoadingThenPrepareDocument",
+    value: function waitForLibLoadingThenPrepareDocument(pdfPath) {
+      var _this3 = this;
+      var isPrepareCancelled = false;
+      var destroyPendingDocPrepare = function destroyPendingDocPrepare() {
+        isPrepareCancelled = true;
+      };
+      var waitLibAndPrepareDocPromise = new Promise(function (resolve, reject) {
+        _this3.onLoadPdfJsLib = async function () {
+          if (isPrepareCancelled) {
+            reject(new Error('canceled'));
+            return;
+          }
+          var doc = await _this3.prepareDocument(pdfPath).promise;
+          resolve(doc);
+        };
+        _this3.onErrorPdfJsLib = function () {
+          reject(new Error('canceled'));
+        };
+        // Making sure that the loading request is sent (maybe it's failed at some point so we are re-sending it)
+        // If it is already loading/in-progress its safe guard condition there won't re-trigger it.
+        _this3.loadLib();
+      });
+
+      // Simulating used properties in PdfPreview and same as the ones returned from getDocument of the lib.
+      return {
+        promise: waitLibAndPrepareDocPromise,
+        destroy: destroyPendingDocPrepare
+      };
+    }
+  }, {
+    key: "prepareDocument",
+    value: function prepareDocument(pdfPath) {
+      if (!this.pdfJsLib) {
+        return this.waitForLibLoadingThenPrepareDocument(pdfPath);
+      }
+      return this.pdfJsLib.getDocument(pdfPath);
+    }
+  }, {
+    key: "render",
+    value: function render(_ref) {
+      var file = _ref.file,
+        setIsFailedToViewPdf = _ref.setIsFailedToViewPdf;
+      var pdfSource = isUploadableFile(file) ? ScaleflexWidget.uploadFilesData[file.id] : getFileLink(file);
+      return PdfPreview({
+        pdfSource: pdfSource,
+        i18n: this.i18n,
+        prepareDocument: this.prepareDocument,
+        onError: this.handleLoadingDocumentError.bind(this, setIsFailedToViewPdf)
+      });
+    }
+  }]);
+}(Plugin);
+export default PdfJs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/widget-pdf-js",
-  "version": "4.4.0",
+  "version": "4.5.1",
   "description": "Pdf-js integration with Scaleflex",
   "license": "MIT",
   "main": "lib/index.js",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@scaleflex/icons": "^3.0.0-beta.11",
     "@scaleflex/ui": "^3.0.0-beta.11",
-    "@scaleflex/widget-common": "^4.4.0"
+    "@scaleflex/widget-common": "^4.5.1"
   },
   "devDependencies": {
     "react": "^19.0.0",
@@ -27,5 +27,5 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
-  "gitHead": "04b8ec545c4f10be89f5a44eed954acf8433360c"
+  "gitHead": "b211f9961ad30d3eaa01138f34e190ad5d38fb91"
 }