@progress/kendo-react-pdf-viewer 5.10.0-dev.202211281232 → 5.10.0-dev.202212021346

package/dist/npm/PDFViewer.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Toolbar } from '@progress/kendo-react-buttons';
+import { ToolbarProps } from '@progress/kendo-react-buttons';
 import { SaveOptions } from '@progress/kendo-file-saver';
 import { TypedArray } from 'pdfjs-dist/types/src/display/api';
 import 'pdfjs-dist/build/pdf.worker.entry';
+export declare type PDFViewerTool = 'pager' | 'spacer' | 'zoomInOut' | 'zoom' | 'selection' | 'search' | 'open' | 'download' | 'print';
 interface PDFViewerEvent {
     /**
      * The event target object.
@@ -42,6 +43,32 @@ export interface DownloadEvent extends PDFViewerEvent {
  */
 export interface LoadEvent extends PDFViewerEvent {
 }
+/**
+ * The KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) ZoomEvent object.
+ */
+export interface ZoomEvent extends PDFViewerEvent {
+    /**
+     * The zoom value.
+     */
+    zoom: number;
+    /**
+     * A React `SyntheticEvent`.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
+/**
+ * The KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) PageEvent object.
+ */
+export interface PageEvent extends PDFViewerEvent {
+    /**
+     * The page number.
+     */
+    page: number;
+    /**
+     * A React `SyntheticEvent`.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
 /**
  * The props of the KendoReact [PDFViewer]({% slug api_pdf-viewer_pdfviewer %}) component.
  */
@@ -74,6 +101,12 @@ export interface PDFViewerProps {
      * Represents the options for saving the file when the user clicks the download tool.
      */
     saveOptions?: SaveOptions;
+    /**
+     * Represents the tools collection rendered in the toolbar.
+     *
+     * @default - ['pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print']
+     */
+    tools?: PDFViewerTool[];
     /**
      * Represents the zoom levels populated in the ComboBox component.
      */
@@ -84,6 +117,26 @@ export interface PDFViewerProps {
         type: string;
         locationString?: string;
     }[];
+    /**
+     * Represents the zoom value of the document.
+     */
+    zoom?: number;
+    /**
+     * Represents the default zoom value.
+     */
+    defaultZoom?: number;
+    /**
+     * Represents the minimum zoom value.
+     */
+    minZoom?: number;
+    /**
+     * Represents the maximum zoom value.
+     */
+    maxZoom?: number;
+    /**
+     * Represents the zoom rate value.
+     */
+    zoomRate?: number;
     /**
      * Fires when an error occurs.
      */
@@ -95,11 +148,19 @@ export interface PDFViewerProps {
     /**
      * Fires when the download tool has been clicked. To prevent the download, return `false`.
      */
-    onDownload?: (event: DownloadEvent) => boolean;
+    onDownload?: (event: DownloadEvent) => boolean | void;
+    /**
+     * Fires when the zoom has changed.
+     */
+    onZoom?: (event: ZoomEvent) => void;
+    /**
+     * Fires when the page has changed.
+     */
+    onPageChange?: (event: PageEvent) => void;
     /**
      * Fires when the toolbar component is about to be rendered. Use it to override the default appearance of the toolbar.
      */
-    onRenderToolbar?: (defaultRendering: React.ReactElement<Toolbar>) => React.ReactNode;
+    onRenderToolbar?: (defaultRendering: React.ReactElement<ToolbarProps>) => React.ReactNode;
     /**
      * Fires when the content component is about to be rendered. Use it to override the default appearance of the content.
      */

package/dist/npm/PDFViewer.js

@@ -17,22 +17,32 @@ const scroller_1 = require("./scroller");
 const search_1 = require("./search");
 const utils_1 = require("./utils");
 const messages_1 = require("./messages");
-const zoomMin = 0.5;
-const zoomMax = 4;
-const zoomStep = 0.25;
-const zoomLevels = [
-    { id: 1, value: 1, text: 'ActualWidth', type: 'ActualWidth', locationString: messages_1.actualWidth },
-    { id: 2, value: 1, text: 'FitToWidth', type: 'FitToWidth', locationString: messages_1.fitToWidth },
-    { id: 3, value: 1, text: 'FitToPage', type: 'FitToPage', locationString: messages_1.fitToPage },
-    { id: 4, value: 0.5, text: '50%', type: '' },
-    { id: 5, value: 0.75, text: '75%', type: '' },
-    { id: 6, value: 1, text: '100%', type: '' },
-    { id: 7, value: 1.25, text: '125%', type: '' },
-    { id: 8, value: 1.5, text: '150%', type: '' },
-    { id: 9, value: 2, text: '200%', type: '' },
-    { id: 10, value: 3, text: '300%', type: '' },
-    { id: 11, value: 4, text: '400%', type: '' }
+const toolNames = [
+    'pager', 'spacer', 'zoomInOut', 'zoom', 'selection', 'spacer', 'search', 'open', 'download', 'print'
 ];
+// Correct declaration but typedoc does not recognize it.
+// export type PDFViewerTool = typeof toolNames[number];
+const defaultProps = {
+    minZoom: 0.5,
+    maxZoom: 4,
+    tools: [...toolNames],
+    zoomRate: 0.25,
+    zoomLevels: [
+        { id: 1, value: 1, text: 'ActualWidth', type: 'ActualWidth', locationString: messages_1.actualWidth },
+        { id: 2, value: 1, text: 'FitToWidth', type: 'FitToWidth', locationString: messages_1.fitToWidth },
+        { id: 3, value: 1, text: 'FitToPage', type: 'FitToPage', locationString: messages_1.fitToPage },
+        { id: 4, value: 0.5, text: '50%', type: '' },
+        { id: 5, value: 0.75, text: '75%', type: '' },
+        { id: 6, value: 1, text: '100%', type: '' },
+        { id: 7, value: 1.25, text: '125%', type: '' },
+        { id: 8, value: 1.5, text: '150%', type: '' },
+        { id: 9, value: 2, text: '200%', type: '' },
+        { id: 10, value: 3, text: '300%', type: '' },
+        { id: 11, value: 4, text: '400%', type: '' }
+    ],
+    defaultZoom: 1.25,
+    defaultPage: 1
+};
 const navigation = [
     '.k-toolbar > button',
     '.k-toolbar .k-combobox > input',
@@ -45,14 +55,19 @@ const navigation = [
  */
 exports.PDFViewer = React.forwardRef((props, ref) => {
     (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    const { zoom, zoomLevels = defaultProps.zoomLevels, defaultZoom = defaultProps.defaultZoom, minZoom = defaultProps.minZoom, maxZoom = defaultProps.maxZoom, zoomRate = defaultProps.zoomRate } = props;
     const loc = (0, kendo_react_intl_1.useLocalization)();
     const pagesRef = React.useRef(null);
-    const [zoom, setZoom] = React.useState(utils_1.DEFAULT_ZOOM_LEVEL);
-    const [zoomLevel, setZoomLevel] = React.useState(zoomLevels.find(z => z.value === utils_1.DEFAULT_ZOOM_LEVEL));
+    const [stateZoom, setStateZoom] = React.useState(defaultZoom);
+    const currentZoom = zoom !== undefined ? zoom : stateZoom;
+    const currentZoomLevel = zoomLevels.find(z => z.value === currentZoom) ||
+        { text: (currentZoom * 100) + '%', value: currentZoom, id: currentZoom, locationString: '' };
+    if (currentZoomLevel.locationString) {
+        currentZoomLevel.text = loc.toLanguageString(currentZoomLevel.locationString, messages_1.messages[currentZoomLevel.locationString]);
+    }
+    const [hasDocument, setHasDocument] = React.useState(false);
     const [loading, setLoading] = React.useState(true);
     const [skip, setSkip] = React.useState(0);
-    const [pages, setPages] = React.useState([]);
-    const [doc, setDoc] = React.useState(null);
     const [enabledSelection, setEnabledSelection] = React.useState(false);
     const [showSearch, setShowSearch] = React.useState(false);
     const [matches, setMatches] = React.useState(0);
@@ -60,14 +75,15 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
     const [matchCase, setMatchCase] = React.useState(false);
     const [searchText, setSearchText] = React.useState('');
     const refObj = React.useMemo(() => ({}), []);
+    refObj.currentZoom = currentZoom;
     const target = React.useRef(null);
     const pdfViewerRef = React.useRef(null);
     React.useImperativeHandle(target, () => ({
         element: pdfViewerRef.current,
         props,
-        pages,
-        document: doc
-    }), [pages, doc]);
+        pages: refObj.pages,
+        document: refObj.document
+    }), []);
     React.useImperativeHandle(ref, () => target.current);
     const triggerOnLoad = React.useCallback(() => {
         if (props.onLoad) {
@@ -76,7 +92,6 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
         }
     }, [props.onLoad]);
     const triggerOnDownload = React.useCallback((blob, fileName, saveOptions) => {
-        let handled = false;
         if (props.onDownload) {
             const downloadEvent = {
                 target: target.current,
@@ -84,9 +99,10 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
                 fileName,
                 saveOptions
             };
-            handled = props.onDownload.call(undefined, downloadEvent) || false;
+            const result = props.onDownload.call(undefined, downloadEvent);
+            return result === false ? true : false;
         }
-        return handled;
+        return false;
     }, [props.onDownload]);
     const initScroller = React.useCallback(() => {
         var _a;
@@ -108,17 +124,20 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
             charClass: 'k-text-char'
         });
     }, []);
-    const done = React.useCallback(({ pdfPages, pdfDoc }) => {
-        setDoc(pdfDoc);
-        setPages(pdfPages);
+    const done = React.useCallback(({ pdfPages, pdfDoc, zoom: documentZoom }) => {
+        refObj.document = pdfDoc;
+        refObj.pages = pdfPages;
+        refObj.zoom = documentZoom;
         initScroller();
         setLoading(false);
+        setHasDocument(true);
         triggerOnLoad();
     }, []);
     const error = React.useCallback((reason) => {
+        refObj.document = null;
+        refObj.pages = [];
         setLoading(false);
-        setDoc(null);
-        setPages([]);
+        setHasDocument(false);
         if (props.onError) {
             const errorEvent = {
                 error: typeof reason === 'string' ? { message: reason } : reason,
@@ -127,6 +146,7 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
             props.onError.call(undefined, errorEvent);
         }
     }, [props.onError]);
+    refObj.onError = error;
     React.useEffect(() => {
         if (pagesRef.current) {
             if (props.url || props.data || props.arrayBuffer) {
@@ -137,20 +157,21 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
                     data: props.data,
                     arrayBuffer: props.arrayBuffer,
                     dom: pagesRef.current,
-                    zoom: utils_1.DEFAULT_ZOOM_LEVEL,
+                    zoom: refObj.currentZoom,
                     done,
-                    error
+                    error: refObj.onError
                 });
             }
             else {
+                refObj.document = null;
+                refObj.pages = [];
+                setHasDocument(false);
                 setLoading(false);
                 (0, utils_1.removeChildren)(pagesRef.current);
-                setDoc(null);
-                setPages([]);
             }
         }
-    }, [props.url, props.data, props.arrayBuffer, error]);
-    const reload = React.useCallback((pdfDoc, zoomLev = utils_1.DEFAULT_ZOOM_LEVEL) => {
+    }, [props.url, props.data, props.arrayBuffer]);
+    const reload = React.useCallback((pdfDoc, zoomLev) => {
         if (pagesRef.current) {
             setLoading(true);
             (0, utils_1.removeChildren)(pagesRef.current);
@@ -159,13 +180,19 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
                 zoom: zoomLev,
                 dom: pagesRef.current,
                 done: (pdfPages) => {
-                    setPages(pdfPages);
+                    refObj.pages = pdfPages;
+                    refObj.zoom = zoomLev;
                     setLoading(false);
                 },
                 error
             });
         }
     }, [error]);
+    React.useEffect(() => {
+        if (pagesRef.current && refObj.document && currentZoom !== refObj.zoom) {
+            reload(refObj.document, currentZoom);
+        }
+    }, [currentZoom, reload]);
     const onSearch = React.useCallback(() => {
         setShowSearch(true);
         initSearch(pagesRef.current);
@@ -210,45 +237,97 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
         }
     }, [currentMatch, matches]);
     const onPageChange = React.useCallback((e) => {
-        if (pagesRef.current && pagesRef.current.parentNode instanceof HTMLDivElement) {
-            const page = pagesRef.current.querySelector('.k-page');
-            if (page instanceof HTMLDivElement) {
-                const top = (page.offsetHeight + page.offsetTop) * e.skip;
-                pagesRef.current.parentNode.scrollTo({ top, behavior: 'auto' });
+        if (pagesRef.current) {
+            const nextPage = e.skip;
+            (0, utils_1.scrollToPage)(pagesRef.current, nextPage);
+            const pageEvent = {
+                page: nextPage + 1,
+                target: target.current,
+                syntheticEvent: e.syntheticEvent
+            };
+            if (props.onPageChange) {
+                props.onPageChange.call(undefined, pageEvent);
             }
         }
         setSkip(e.skip);
-    }, [skip]);
+    }, [skip, props.onPageChange]);
     const onScroll = React.useCallback((e) => {
-        const targetEl = e.target;
-        const page = targetEl.querySelector('.k-page');
-        if (page) {
-            setSkip(Math.floor(targetEl.scrollTop / (page.offsetHeight + page.offsetTop)));
+        if (pdfViewerRef.current) {
+            const nextPage = (0, utils_1.currentPage)(pdfViewerRef.current);
+            if (nextPage !== skip) {
+                setSkip(nextPage);
+                const pageEvent = {
+                    page: nextPage + 1,
+                    target: target.current,
+                    syntheticEvent: e
+                };
+                if (props.onPageChange) {
+                    props.onPageChange.call(undefined, pageEvent);
+                }
+            }
         }
-    }, []);
-    const onZoomIn = React.useCallback(() => {
-        const newZoom = Math.min(zoom + zoomStep, zoomMax);
-        if (newZoom !== zoom && doc) {
-            setZoom(newZoom);
-            reload(doc, newZoom);
+    }, [skip, props.onPageChange]);
+    const onZoomIn = React.useCallback((e) => {
+        const newZoom = Math.min(currentZoom + zoomRate, maxZoom);
+        if (newZoom !== currentZoom && refObj.document) {
+            setStateZoom(newZoom);
+            if (zoom === undefined) {
+                reload(refObj.document, newZoom);
+            }
+            if (props.onZoom) {
+                const zoomEvent = {
+                    zoom: newZoom,
+                    target: target.current,
+                    syntheticEvent: e
+                };
+                props.onZoom.call(undefined, zoomEvent);
+            }
         }
-    }, [zoom, doc]);
-    const onZoomOut = React.useCallback(() => {
-        const newZoom = Math.max(zoom - zoomStep, zoomMin);
-        if (newZoom !== zoom && doc) {
-            setZoom(newZoom);
-            reload(doc, newZoom);
+    }, [currentZoom, zoomRate, maxZoom, zoom, props.onZoom, reload]);
+    const onZoomOut = React.useCallback((e) => {
+        const newZoom = Math.max(stateZoom - zoomRate, minZoom);
+        if (newZoom !== stateZoom && refObj.document) {
+            setStateZoom(newZoom);
+            if (zoom === undefined) {
+                reload(refObj.document, newZoom);
+            }
+            if (props.onZoom) {
+                const zoomEvent = {
+                    zoom: newZoom,
+                    target: target.current,
+                    syntheticEvent: e
+                };
+                props.onZoom.call(undefined, zoomEvent);
+            }
         }
-    }, [zoom, doc]);
+    }, [currentZoom, zoomRate, minZoom, zoom, props.onZoom, reload]);
     const onZoomLevelChange = React.useCallback((e) => {
-        const item = e.value;
-        const newZoom = item ? (0, utils_1.calculateZoomLevel)(item.value, item.type, zoom, pagesRef.current) : 1;
-        if (zoom !== newZoom && doc) {
-            setZoom(newZoom);
-            reload(doc, newZoom);
+        const item = e.value === null ? { text: '100%', value: 1, id: 100 } : Object.assign({}, e.value);
+        if (item.value === undefined) {
+            const parsedText = parseFloat(item.text);
+            if (typeof parsedText === 'number' && !Number.isNaN(parsedText)) {
+                item.value = parsedText / 100;
+            }
+            else {
+                item.value = 1;
+            }
         }
-        setZoomLevel(item);
-    }, [zoom, doc]);
+        const newZoom = item ? (0, utils_1.calculateZoomLevel)(item.value, item.type, currentZoom, pagesRef.current) : 1;
+        if (currentZoom !== newZoom && refObj.document) {
+            setStateZoom(newZoom);
+            if (zoom === undefined) {
+                reload(refObj.document, newZoom);
+            }
+            if (props.onZoom) {
+                const zoomEvent = {
+                    zoom: newZoom,
+                    target: target.current,
+                    syntheticEvent: e.syntheticEvent
+                };
+                props.onZoom.call(undefined, zoomEvent);
+            }
+        }
+    }, [currentZoom, zoom, props.onZoom, reload]);
     const onTextSelection = React.useCallback(() => {
         refObj.scroller.disablePanEventsTracking();
         setEnabledSelection(true);
@@ -273,8 +352,8 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
         const onDone = () => {
             setLoading(false);
         };
-        (0, utils_1.print)(pages, onDone, onError);
-    }, [pages, error]);
+        (0, utils_1.print)(refObj.pages, onDone, onError);
+    }, [error]);
     const onAdd = React.useCallback((e) => {
         const st = e.newState;
         if (st[0] && st[0].getRawFile) {
@@ -290,7 +369,7 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
                         done,
                         error
                     });
-                    setZoom(utils_1.DEFAULT_ZOOM_LEVEL);
+                    setStateZoom(utils_1.DEFAULT_ZOOM_LEVEL);
                 }
             });
         }
@@ -305,30 +384,41 @@ exports.PDFViewer = React.forwardRef((props, ref) => {
             }
         }
     }, []);
-    const noDocument = !doc;
     const loader = (loading && React.createElement("div", { className: "k-loader-container k-loader-container-md k-loader-top" },
         React.createElement("div", { className: "k-loader-container-overlay k-overlay-light" }),
         React.createElement("div", { className: "k-loader-container-inner " },
             React.createElement(kendo_react_indicators_1.Loader, { size: 'large' }))));
-    const toolbar = (React.createElement(kendo_react_buttons_1.Toolbar, { buttons: navigation },
-        React.createElement(kendo_react_data_tools_1.Pager, { previousNext: true, type: 'input', skip: skip, take: 1, total: pages.length, info: false, onPageChange: onPageChange }),
-        React.createElement(kendo_react_buttons_1.ToolbarSpacer, null),
-        React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-            React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.zoomIn, messages_1.messages[messages_1.zoomIn]), disabled: zoom === zoomMax || noDocument, onClick: onZoomIn, icon: 'zoom-in' }),
-            React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.zoomOut, messages_1.messages[messages_1.zoomOut]), disabled: zoom === zoomMin || noDocument, onClick: onZoomOut, icon: 'zoom-out' })),
-        React.createElement(kendo_react_dropdowns_1.ComboBox, { disabled: noDocument, data: (props.zoomLevels || zoomLevels).map(level => (Object.assign(Object.assign({}, level), { text: level.locationString
-                    ? loc.toLanguageString(level.locationString, messages_1.messages[level.locationString])
-                    : level.text }))), dataItemKey: 'id', textField: 'text', value: noDocument ? null : zoomLevel, onChange: onZoomLevelChange }),
-        React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-            React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.enableSelection, messages_1.messages[messages_1.enableSelection]), icon: 'cursor', disabled: noDocument, togglable: true, selected: enabledSelection && !noDocument, onClick: onTextSelection }),
-            React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.enablePanning, messages_1.messages[messages_1.enablePanning]), icon: 'hand', disabled: noDocument, togglable: true, selected: !enabledSelection && !noDocument, onClick: onPinning })),
-        React.createElement(kendo_react_buttons_1.ToolbarSpacer, null),
-        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.search, messages_1.messages[messages_1.search]), icon: 'search', disabled: noDocument, onClick: onSearch }),
+    const zoomInOut = (React.createElement(kendo_react_buttons_1.ButtonGroup, null,
+        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.zoomOut, messages_1.messages[messages_1.zoomOut]), disabled: currentZoom <= minZoom || !hasDocument, onClick: onZoomOut, icon: 'zoom-out' }),
+        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.zoomIn, messages_1.messages[messages_1.zoomIn]), disabled: currentZoom >= maxZoom || !hasDocument, onClick: onZoomIn, icon: 'zoom-in' })));
+    const zoomComboBoxTool = (React.createElement(kendo_react_dropdowns_1.ComboBox, { disabled: !hasDocument, data: (zoomLevels).map(level => (Object.assign(Object.assign({}, level), { text: level.locationString
+                ? loc.toLanguageString(level.locationString, messages_1.messages[level.locationString])
+                : level.text }))), dataItemKey: 'id', textField: 'text', value: hasDocument ? currentZoomLevel : null, allowCustom: true, onChange: onZoomLevelChange }));
+    const pagerTool = (React.createElement(kendo_react_data_tools_1.Pager, { previousNext: true, type: 'input', skip: skip, take: 1, total: refObj.pages ? refObj.pages.length : 0, info: false, onPageChange: onPageChange }));
+    const spacer = React.createElement(kendo_react_buttons_1.ToolbarSpacer, null);
+    const selectionTool = (React.createElement(kendo_react_buttons_1.ButtonGroup, null,
+        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.enableSelection, messages_1.messages[messages_1.enableSelection]), icon: 'cursor', disabled: !hasDocument, togglable: true, selected: enabledSelection && hasDocument, onClick: onTextSelection }),
+        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.enablePanning, messages_1.messages[messages_1.enablePanning]), icon: 'hand', disabled: !hasDocument, togglable: true, selected: !enabledSelection && hasDocument, onClick: onPinning })));
+    const searchTool = (React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.search, messages_1.messages[messages_1.search]), icon: 'search', disabled: !hasDocument, onClick: onSearch }));
+    const openTool = (React.createElement(React.Fragment, null,
         React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.open, messages_1.messages[messages_1.open]), icon: 'folder-open', onClick: onFileOpen }),
         React.createElement("div", { style: { display: 'none' } },
-            React.createElement(kendo_react_upload_1.Upload, { restrictions: { allowedExtensions: ['.pdf'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".pdf,.PDF", withCredentials: false })),
-        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.download, messages_1.messages[messages_1.download]), icon: 'download', disabled: noDocument, onClick: onDownload }),
-        React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.print, messages_1.messages[messages_1.print]), icon: 'print', disabled: noDocument, onClick: onPrint })));
+            React.createElement(kendo_react_upload_1.Upload, { restrictions: { allowedExtensions: ['.pdf'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".pdf,.PDF", withCredentials: false }))));
+    const downloadTool = (React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.download, messages_1.messages[messages_1.download]), icon: 'download', disabled: !hasDocument, onClick: onDownload }));
+    const printTool = (React.createElement(kendo_react_buttons_1.Button, { className: 'k-toolbar-button', title: loc.toLanguageString(messages_1.print, messages_1.messages[messages_1.print]), icon: 'print', disabled: !hasDocument, onClick: onPrint }));
+    const tools = {
+        pager: pagerTool,
+        spacer,
+        zoomInOut,
+        zoom: zoomComboBoxTool,
+        selection: selectionTool,
+        search: searchTool,
+        open: openTool,
+        download: downloadTool,
+        print: printTool
+    };
+    const buttons = (props.tools || defaultProps.tools).map((tool) => tools[tool]);
+    const toolbar = (React.createElement(kendo_react_buttons_1.Toolbar, { buttons: navigation }, ...buttons));
     const content = (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto', {
             'k-enable-text-select': enabledSelection,
             'k-enable-panning': !enabledSelection
@@ -358,11 +448,19 @@ exports.PDFViewer.propTypes = {
     style: PropTypes.object,
     saveFileName: PropTypes.string,
     saveOptions: PropTypes.object,
+    tools: PropTypes.arrayOf(PropTypes.oneOf(toolNames).isRequired),
     zoomLevels: PropTypes.arrayOf(PropTypes.any),
+    zoom: PropTypes.number,
+    defaultZoom: PropTypes.number,
+    minZoom: PropTypes.number,
+    maxZoom: PropTypes.number,
+    zoomRate: PropTypes.number,
     onError: PropTypes.func,
     onLoad: PropTypes.func,
     onDownload: PropTypes.func,
     onRenderToolbar: PropTypes.func,
     onRenderContent: PropTypes.func,
-    onRenderLoader: PropTypes.func
+    onRenderLoader: PropTypes.func,
+    onZoom: PropTypes.func
 };
+exports.PDFViewer.defaultProps = defaultProps;

package/dist/npm/main.d.ts

@@ -1 +1,2 @@
-export { PDFViewer, PDFViewerProps, PDFViewerHandle, LoadEvent, ErrorEvent, DownloadEvent } from './PDFViewer';
+export { PDFViewer, PDFViewerProps, PDFViewerHandle, PDFViewerTool, LoadEvent, ErrorEvent, DownloadEvent, ZoomEvent, PageEvent } from './PDFViewer';
+export { scrollToPage, currentPage } from './utils';

package/dist/npm/main.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PDFViewer = void 0;
+exports.currentPage = exports.scrollToPage = exports.PDFViewer = void 0;
 var PDFViewer_1 = require("./PDFViewer");
 Object.defineProperty(exports, "PDFViewer", { enumerable: true, get: function () { return PDFViewer_1.PDFViewer; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "scrollToPage", { enumerable: true, get: function () { return utils_1.scrollToPage; } });
+Object.defineProperty(exports, "currentPage", { enumerable: true, get: function () { return utils_1.currentPage; } });

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-pdf-viewer',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1669638609,
+    publishDate: 1669988664,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/utils.d.ts

@@ -7,6 +7,7 @@ import { TypedArray } from 'pdfjs-dist/types/src/display/api';
 export declare type DoneFn = (result: {
     pdfPages: PDFPageProxy[];
     pdfDoc: PDFDocumentProxy;
+    zoom: number;
 }) => void;
 /**
  * @hidden
@@ -76,3 +77,17 @@ export declare const calculateZoomLevel: (zoomLevel: number, zoomLevelType: stri
  * @hidden
  */
 export declare const removeChildren: (dom: HTMLElement) => void;
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+export declare const scrollToPage: (rootElement: HTMLElement, pageNumber: number) => void;
+/**
+ * A function which gives you the page number of the document according to the scroll position.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @returns The page number.
+ */
+export declare const currentPage: (rootElement: HTMLElement) => number;

package/dist/npm/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeChildren = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.DEFAULT_ZOOM_LEVEL = void 0;
+exports.currentPage = exports.scrollToPage = exports.removeChildren = exports.calculateZoomLevel = exports.goToPreviousSearchMatch = exports.goToNextSearchMatch = exports.print = exports.reloadDocument = exports.loadPDF = exports.download = exports.DEFAULT_ZOOM_LEVEL = void 0;
 const kendo_file_saver_1 = require("@progress/kendo-file-saver");
 const pdfjs_dist_1 = require("pdfjs-dist");
 /**
@@ -61,7 +61,7 @@ const loadPDF = (options) => {
             return page;
         }))
             .then((pdfPages) => {
-            done({ pdfPages, pdfDoc });
+            done({ pdfPages, pdfDoc, zoom });
         }).catch((reason) => { options.error(reason); });
     }).catch((reason) => { options.error(reason); });
 };
@@ -249,3 +249,33 @@ const removeChildren = (dom) => {
     }
 };
 exports.removeChildren = removeChildren;
+/**
+ * Scrolls the PDFViewer document to the passed page number.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @param pageNumber The page number.
+ */
+const scrollToPage = (rootElement, pageNumber) => {
+    const pages = rootElement.querySelectorAll('.k-page');
+    const page = pages[0];
+    if (page instanceof HTMLDivElement) {
+        const top = (page.offsetHeight + page.offsetTop) * Math.max(0, Math.min(pageNumber, pages.length - 1));
+        const scrollElement = page.closest('.k-pdf-viewer-canvas');
+        if (scrollElement) {
+            scrollElement.scrollTo({ top, behavior: 'auto' });
+        }
+    }
+};
+exports.scrollToPage = scrollToPage;
+/**
+ * A function which gives you the page number of the document according to the scroll position.
+ *
+ * @param rootElement The root HTML element of the PDFViewer component.
+ * @returns The page number.
+ */
+const currentPage = (rootElement) => {
+    const scrollElement = rootElement.querySelector('.k-pdf-viewer-canvas');
+    const page = rootElement.querySelector('.k-page');
+    return (scrollElement && page) ? Math.floor(scrollElement.scrollTop / (page.offsetHeight + page.offsetTop)) : 0;
+};
+exports.currentPage = currentPage;