@astral/ui 4.35.1 → 4.36.0

package/components/PdfViewer/List/List.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
+import { pdfViewerClassnames } from '../constants';
 import { Wrapper } from './styles';
 export const List = ({ paginationRef, children, initialIndex }) => {
     useEffect(() => {
@@ -11,5 +12,5 @@ export const List = ({ paginationRef, children, initialIndex }) => {
             element.scrollIntoView({ behavior: 'auto', block: 'start' });
         }
     }, []);
-    return _jsx(Wrapper, { ref: paginationRef, children: children });
+    return (_jsx(Wrapper, { ref: paginationRef, className: pdfViewerClassnames.list, children: children }));
 };

package/components/PdfViewer/PdfDocument/PdfDocument.js

@@ -5,8 +5,9 @@ import { StyledDocument } from './styles';
 import { useLogic } from './useLogic';
 export const PDFDocument = (props) => {
     const { documentRef, onAnimationEnd, isLoading } = useLogic(props);
-    const { enabledZoom, ...restProps } = props;
+    const { enabledZoom, isCentered, ...restProps } = props;
     return (_jsx(StyledDocument, { ...restProps, "$isLoading": isLoading, className: classNames(pdfViewerClassnames.document, {
             [pdfViewerClassnames.zoom]: enabledZoom,
+            [pdfViewerClassnames.centered]: isCentered,
         }), inputRef: documentRef, onAnimationEnd: onAnimationEnd }));
 };

package/components/PdfViewer/PdfDocument/styles.js

@@ -9,6 +9,19 @@ export const StyledDocument = styled(Document, {
   /* Сделано что бы скролл не перекрывал тень контейнера для страниц */
   margin: ${({ theme, $isLoading }) => $isLoading ? '0' : theme.microSpacing(1, 1, 2, 2)};
 
+  &.${pdfViewerClassnames.centered} {
+    height: 100%;
+
+    .${pdfViewerClassnames.list} {
+      height: 100%;
+    }
+
+    .${pdfViewerClassnames.page} {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
   .react-pdf__message--loading {
     height: 100%;
   }

package/components/PdfViewer/PdfDocument/types.d.ts

@@ -4,4 +4,5 @@ export type PDFDocumentProps = DocumentProps & {
     isLoading: boolean;
     isViewerLite?: boolean;
     enabledZoom: boolean;
+    isCentered?: boolean;
 };

package/components/PdfViewer/PdfViewer.js

@@ -17,8 +17,8 @@ pdfjs.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_URL;
  * Компонент для просмотра PDF файлов
  */
 export const PdfViewer = (props) => {
-    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, } = useLogic(props);
-    return (_jsx(ContentState, { isError: isError, errorState: errorState, children: _jsxs(Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [_jsx(PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(PDFDocument, { ...documentProps, isLoading: isLoading, loading: _jsx(LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && (_jsx(List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => (_createElement(PDFPage, { ...pageProps, 
+    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, isCentered, } = useLogic(props);
+    return (_jsx(ContentState, { isError: isError, errorState: errorState, children: _jsxs(Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [_jsx(PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(PDFDocument, { ...documentProps, isLoading: isLoading, isCentered: isCentered, loading: _jsx(LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && (_jsx(List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => (_createElement(PDFPage, { ...pageProps, 
                                     // biome-ignore lint/suspicious/noArrayIndexKey: Страницы статичны
                                     key: index, height: height * scale, pageNumber: index + 1, pageCount: pageCount, isViewerLite: isViewerLite, scale: scale, enabledZoom: enabledZoom }))) }, pageHeightList?.[0])) }) }) }), _jsx(ControlBar, { zoomOut: zoomOut, zoomIn: zoomIn, pageNumber: Number(initialIndex) + 1, buttonProps: {
                         isDisabledZoomIn: isDisabledZoomInButton,

package/components/PdfViewer/constants.d.ts

@@ -1,8 +1,10 @@
 export declare const pdfViewerClassnames: {
+    list: string;
     document: string;
     page: string;
     animation: string;
     zoom: string;
+    centered: string;
 };
 export declare const PDFJS_WORKER_URL = "https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs";
 export declare const TEXT_LAYER_CSS_URL = "https://frontend-static.astral.ru/libs/react-pdf/9.2.1/text-layer.min.css";

package/components/PdfViewer/constants.js

@@ -1,9 +1,11 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const pdfViewerClassnames = {
+    list: createUIKitClassname('pdf-viewer__list'),
     document: createUIKitClassname('pdf-viewer__document'),
     page: createUIKitClassname('pdf-viewer__page'),
     animation: createUIKitClassname('pdf-viewer_animation'),
     zoom: createUIKitClassname('pdf-viewer__zoom_enabled'),
+    centered: createUIKitClassname('pdf-viewer_centered'),
 };
 // Worker и CSS загружаются из сервиса статики https://git.astralnalog.ru/frontend.shared/static-files
 export const PDFJS_WORKER_URL = 'https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs';

package/components/PdfViewer/types.d.ts

@@ -59,6 +59,10 @@ export type PdfViewerProps = {
      * Отображение страниц в полную высоту
      */
     isFullHeight?: boolean;
+    /**
+     * Центрирование содержимого контейнера
+     */
+    isCentered?: boolean;
     /**
      * Диапазон индексов страниц, которые необходимо отобразить
      */

package/components/PdfViewer/useLogic/useLogic.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type PdfViewerOnLoadSuccessProps, type PdfViewerProps } from '../types';
-export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
+export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
     documentProps: {
         file: string | Blob | null | undefined;
         options: {
@@ -42,4 +42,5 @@ export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight,
     shouldAnimateZoom: boolean;
     loadingPlaceholderTitle: string | undefined;
     enabledZoom: boolean;
+    isCentered: boolean | undefined;
 };

package/components/PdfViewer/useLogic/useLogic.js

@@ -2,7 +2,7 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
 import { useZoom } from '../hooks/useZoom';
 import { getPageHeightList } from '../utils';
-export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
+export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
     const [containerWidth, setContainerWidth] = useState(1);
     const scrollContainerRef = useRef(null);
     const { zoomOut, scale, zoomIn, shouldAnimateZoom } = useZoom({
@@ -100,5 +100,6 @@ export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderP
         shouldAnimateZoom,
         loadingPlaceholderTitle,
         enabledZoom,
+        isCentered,
     };
 };

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ file, fileUrl, isHidePersonalData, }: UseLogic
     pdfViewerProps: {
         isViewerLite: boolean;
         isFullHeight: boolean;
+        isCentered: boolean;
         file: string | File | null | undefined;
         scrollRef: import("react").RefObject<null>;
         renderPageRange: {

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.js

@@ -28,6 +28,7 @@ export const useLogic = ({ file, fileUrl, isHidePersonalData, }) => {
         pdfViewerProps: {
             isViewerLite: true,
             isFullHeight: true,
+            isCentered: true,
             file: file || fileUrl,
             scrollRef,
             renderPageRange: { end: 0 },

package/node/components/PdfViewer/List/List.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 const List = ({ paginationRef, children, initialIndex }) => {
     (0, react_1.useEffect)(() => {
@@ -14,6 +15,6 @@ const List = ({ paginationRef, children, initialIndex }) => {
             element.scrollIntoView({ behavior: 'auto', block: 'start' });
         }
     }, []);
-    return (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: paginationRef, children: children });
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: paginationRef, className: constants_1.pdfViewerClassnames.list, children: children }));
 };
 exports.List = List;

package/node/components/PdfViewer/PdfDocument/PdfDocument.js

@@ -8,9 +8,10 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PDFDocument = (props) => {
     const { documentRef, onAnimationEnd, isLoading } = (0, useLogic_1.useLogic)(props);
-    const { enabledZoom, ...restProps } = props;
+    const { enabledZoom, isCentered, ...restProps } = props;
     return ((0, jsx_runtime_1.jsx)(styles_1.StyledDocument, { ...restProps, "$isLoading": isLoading, className: (0, classNames_1.classNames)(constants_1.pdfViewerClassnames.document, {
             [constants_1.pdfViewerClassnames.zoom]: enabledZoom,
+            [constants_1.pdfViewerClassnames.centered]: isCentered,
         }), inputRef: documentRef, onAnimationEnd: onAnimationEnd }));
 };
 exports.PDFDocument = PDFDocument;

package/node/components/PdfViewer/PdfDocument/styles.js

@@ -12,6 +12,19 @@ exports.StyledDocument = (0, styled_1.styled)(react_pdf_1.Document, {
   /* Сделано что бы скролл не перекрывал тень контейнера для страниц */
   margin: ${({ theme, $isLoading }) => $isLoading ? '0' : theme.microSpacing(1, 1, 2, 2)};
 
+  &.${constants_1.pdfViewerClassnames.centered} {
+    height: 100%;
+
+    .${constants_1.pdfViewerClassnames.list} {
+      height: 100%;
+    }
+
+    .${constants_1.pdfViewerClassnames.page} {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
   .react-pdf__message--loading {
     height: 100%;
   }

package/node/components/PdfViewer/PdfDocument/types.d.ts

@@ -4,4 +4,5 @@ export type PDFDocumentProps = DocumentProps & {
     isLoading: boolean;
     isViewerLite?: boolean;
     enabledZoom: boolean;
+    isCentered?: boolean;
 };

package/node/components/PdfViewer/PdfViewer.js

@@ -20,8 +20,8 @@ react_pdf_1.pdfjs.GlobalWorkerOptions.workerSrc = constants_1.PDFJS_WORKER_URL;
  * Компонент для просмотра PDF файлов
  */
 const PdfViewer = (props) => {
-    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isError: isError, errorState: errorState, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [(0, jsx_runtime_1.jsx)(styles_1.PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(styles_1.ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(PdfDocument_1.PDFDocument, { ...documentProps, isLoading: isLoading, loading: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && ((0, jsx_runtime_1.jsx)(List_1.List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => ((0, react_1.createElement)(PdfPage_1.PDFPage, { ...pageProps, 
+    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, isCentered, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isError: isError, errorState: errorState, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [(0, jsx_runtime_1.jsx)(styles_1.PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(styles_1.ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(PdfDocument_1.PDFDocument, { ...documentProps, isLoading: isLoading, isCentered: isCentered, loading: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && ((0, jsx_runtime_1.jsx)(List_1.List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => ((0, react_1.createElement)(PdfPage_1.PDFPage, { ...pageProps, 
                                     // biome-ignore lint/suspicious/noArrayIndexKey: Страницы статичны
                                     key: index, height: height * scale, pageNumber: index + 1, pageCount: pageCount, isViewerLite: isViewerLite, scale: scale, enabledZoom: enabledZoom }))) }, pageHeightList?.[0])) }) }) }), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { zoomOut: zoomOut, zoomIn: zoomIn, pageNumber: Number(initialIndex) + 1, buttonProps: {
                         isDisabledZoomIn: isDisabledZoomInButton,

package/node/components/PdfViewer/constants.d.ts

@@ -1,8 +1,10 @@
 export declare const pdfViewerClassnames: {
+    list: string;
     document: string;
     page: string;
     animation: string;
     zoom: string;
+    centered: string;
 };
 export declare const PDFJS_WORKER_URL = "https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs";
 export declare const TEXT_LAYER_CSS_URL = "https://frontend-static.astral.ru/libs/react-pdf/9.2.1/text-layer.min.css";

package/node/components/PdfViewer/constants.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRACKPAD_DELTA_Y_THRESHOLD = exports.ZOOM_INTENSITY_TRACKPAD = exports.ZOOM_INTENSITY_MOUSE = exports.ZOOM_STEP_OUT = exports.ZOOM_STEP_IN = exports.ZOOM_MAX = exports.ZOOM_MIN = exports.RESERVED_TOP_SPACE = exports.RESERVED_CONTROL_BAR_SPACE = exports.PDF_VIEWER_ANIMATION = exports.ANNOTATION_LAYER_CSS_URL = exports.TEXT_LAYER_CSS_URL = exports.PDFJS_WORKER_URL = exports.pdfViewerClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pdfViewerClassnames = {
+    list: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__list'),
     document: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__document'),
     page: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__page'),
     animation: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer_animation'),
     zoom: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__zoom_enabled'),
+    centered: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer_centered'),
 };
 // Worker и CSS загружаются из сервиса статики https://git.astralnalog.ru/frontend.shared/static-files
 exports.PDFJS_WORKER_URL = 'https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs';

package/node/components/PdfViewer/types.d.ts

@@ -59,6 +59,10 @@ export type PdfViewerProps = {
      * Отображение страниц в полную высоту
      */
     isFullHeight?: boolean;
+    /**
+     * Центрирование содержимого контейнера
+     */
+    isCentered?: boolean;
     /**
      * Диапазон индексов страниц, которые необходимо отобразить
      */

package/node/components/PdfViewer/useLogic/useLogic.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type PdfViewerOnLoadSuccessProps, type PdfViewerProps } from '../types';
-export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
+export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
     documentProps: {
         file: string | Blob | null | undefined;
         options: {
@@ -42,4 +42,5 @@ export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight,
     shouldAnimateZoom: boolean;
     loadingPlaceholderTitle: string | undefined;
     enabledZoom: boolean;
+    isCentered: boolean | undefined;
 };

package/node/components/PdfViewer/useLogic/useLogic.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
 const useZoom_1 = require("../hooks/useZoom");
 const utils_1 = require("../utils");
-const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
+const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
     const [containerWidth, setContainerWidth] = (0, react_1.useState)(1);
     const scrollContainerRef = (0, react_1.useRef)(null);
     const { zoomOut, scale, zoomIn, shouldAnimateZoom } = (0, useZoom_1.useZoom)({
@@ -103,6 +103,7 @@ const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderPageRang
         shouldAnimateZoom,
         loadingPlaceholderTitle,
         enabledZoom,
+        isCentered,
     };
 };
 exports.useLogic = useLogic;

package/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ file, fileUrl, isHidePersonalData, }: UseLogic
     pdfViewerProps: {
         isViewerLite: boolean;
         isFullHeight: boolean;
+        isCentered: boolean;
         file: string | File | null | undefined;
         scrollRef: import("react").RefObject<null>;
         renderPageRange: {

package/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.js

@@ -31,6 +31,7 @@ const useLogic = ({ file, fileUrl, isHidePersonalData, }) => {
         pdfViewerProps: {
             isViewerLite: true,
             isFullHeight: true,
+            isCentered: true,
             file: file || fileUrl,
             scrollRef,
             renderPageRange: { end: 0 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.35.1",
+  "version": "4.36.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {